BUX Component Development Platform

Person With Sidebar 

<div class="bux-grid__cell bux-grid__cell--12@sm">

     <nav aria-label="Breadcrumb" class="bux-breadcrumb">
         <ol class="bux-breadcrumb__list">
             <li class="bux-breadcrumb__item">
                 <a class="bux-breadcrumb__link" href="#">Home</a>
             </li>
             <li class="bux-breadcrumb__item">
                 <a class="bux-breadcrumb__link" href="#">Level 1</a>
             </li>
             <li class="bux-breadcrumb__item">
                 <a class="bux-breadcrumb__link" href="#">Level 2</a>
             </li>
             <li class="bux-breadcrumb__item bux-breadcrumb__item--current" aria-current="page">Level 3</li>
         </ol>
     </nav>

     <h1>H1 FirstName LastName</h1>
     <div class="page-subhead">One to three concise sentences of introtext informs visitors what the purpose of the
         webpage is. It helps users quickly decide if they’re in the right place or not.</div>
 </div>

 <div class="bux-grid__cell bux-grid__cell--12@sm bux-grid__cell--9@md bux-mar-top-sp-24">
     <div class="bux-panel bux-mar-all-none">
         <ul style="margin: 0; padding: 0;">
             <li class="icon">
                 <span class="icon-envelope"></span>
                 <div><strong>Email</strong> <br>name.#@osu.edu</div>
             </li>
             <li class="icon">
                 <span class="icon-phone"></span>
                 <div><strong>Phone</strong> <br>123-456-7890</div>
             </li>
             <li class="icon">
                 <span class="icon-location-pin"></span>
                 <div><strong>Office</strong> <br>123 Mendenhall Laboratory</div>
             </li>
             <li class="icon">
                 <span class="icon-link"></span>
                 <div><strong>Links</strong> <br>
                     <div class="bux-link-example">

                         <a class="bux-link" href="#">Link to professional website or blog</a>

                     </div>
                 </div>
             </li>
         </ul>
     </div>
 </div>
 <div class="bux-grid__cell bux-grid__cell--12@sm bux-grid__cell--3@md bux-mar-top-sp-24">

     <img class="bux-image" src=/images/placeholders/bux-image-placeholder-1-1.png alt="">

 </div>

 <div class="bux-grid__cell bux-grid__cell--12 bux-mar-top-sp-24">
     <h2>Biography</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis ex nec tristique ullamcorper. Vivamus tristique, lectus eget mattis
         interdum, sem odio sollicitudin lorem, at scelerisque magna metus non odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
         mollis ex nec tristique ullamcorper. Vivamus tristique, lectus eget mattis interdum, sem odio sollicitudin lorem, at scelerisque magna metus
         non odio.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis ex nec tristique ullamcorper. Vivamus tristique, lectus eget mattis
         interdum, sem odio sollicitudin lorem, at scelerisque magna metus non odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
         mollis ex nec tristique ullamcorper. Vivamus tristique, lectus eget mattis interdum, sem odio sollicitudin lorem, at scelerisque magna metus
         non odio.</p>

     <h2 class="bux-mar-top-sp-24">Education</h2>
     <span><strong>Degree</strong></span><br>
     <span>Institution, Location, Year</span><br><br>

     <span><strong>Degree</strong></span><br>
     <span>Institution, Location, Year</span><br><br>

     <span><strong>Degree</strong></span><br>
     <span>Institution, Location, Year</span>

     <h2 class="bux-mar-top-sp-24">Research Interests</h2>

     <ul class="bux-list-ul">
         <li>
             List item 1
         </li>
         <li>List item 2</li>
         <li>
             List item 3
         </li>
     </ul>

     <h2 class="bux-mar-top-sp-24">Publications</h2>

     <div class="bux-link-example bux-link-example--after">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
             mollis ex nec tristique ullamcorper. <a class="bux-link bux-link--after" href="#">Link to Publicaion</a></p>

     </div>

 </div>
 
{% render '@person-no-sidebar' %}
 
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605

No notes defined.