BUX Component Development Platform

Person List No 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 page title</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>

<ul class="bux-grid">
    <li class="bux-grid__cell bux-grid__cell--12 person-row bux-mar-top-sp-32">
        <!-- start person -->
        <div class="person-name">
            <span style="font-size: 1.25rem; font-weight: 700;">FirstName LastName</span>
            <span style="color: #a7b1b7;">pronouns</span>
            <span>Title One</span>
            <span>Title Two</span>
            <span style="text-transform: uppercase; color: #a7b1b7;">Primary Unit Name</span>
        </div>

        <div class="person-contact">
            <div class="icon">
                <span class="icon-envelope"></span>
                <div><strong>Email</strong> name.#@osu.edu</div>
            </div>

            <div class="icon">
                <span class="icon-phone"></span>
                <div><strong>Phone</strong> 123-456-7890</div>
            </div>
        </div>
        <div class="person-image">
            <img class="bux-quote__image" style="position:relative;" src=../../images/placeholders/bux-image-placeholder-1-1.png alt="">
        </div>
        <!-- end person -->
    </li>

    <li class="bux-grid__cell bux-grid__cell--12 person-row bux-mar-top-sp-32">
        <!-- start person -->
        <div class="person-name">
            <span style="font-size: 1.25rem; font-weight: 700;">FirstName LastName</span>
            <span style="color: #a7b1b7;">pronouns</span>
            <span>Title One</span>
            <span>Title Two</span>
            <span style="text-transform: uppercase; color: #a7b1b7;">Primary Unit Name</span>
        </div>

        <div class="person-contact">
            <div class="icon">
                <span class="icon-envelope"></span>
                <div><strong>Email</strong> name.#@osu.edu</div>
            </div>

            <div class="icon">
                <span class="icon-phone"></span>
                <div><strong>Phone</strong> 123-456-7890</div>
            </div>
        </div>
        <div class="person-image">
            <img class="bux-quote__image" style="position:relative;" src=../../images/placeholders/bux-image-placeholder-1-1.png alt="">
        </div>
        <!-- end person -->
    </li>

    <li class="bux-grid__cell bux-grid__cell--12 person-row bux-mar-top-sp-32">
        <!-- start person -->
        <div class="person-name">
            <span style="font-size: 1.25rem; font-weight: 700;">FirstName LastName</span>
            <span style="color: #a7b1b7;">pronouns</span>
            <span>Title One</span>
            <span>Title Two</span>
            <span style="text-transform: uppercase; color: #a7b1b7;">Primary Unit Name</span>
        </div>

        <div class="person-contact">
            <div class="icon">
                <span class="icon-envelope"></span>
                <div><strong>Email</strong> name.#@osu.edu</div>
            </div>

            <div class="icon">
                <span class="icon-phone"></span>
                <div><strong>Phone</strong> 123-456-7890</div>
            </div>
        </div>
        <div class="person-image">
            <img class="bux-quote__image" style="position:relative;" src=../../images/placeholders/bux-image-placeholder-1-1.png alt="">
        </div>
        <!-- end person -->
    </li>

    <li class="bux-grid__cell bux-grid__cell--12 person-row bux-mar-top-sp-32">
        <!-- start person -->
        <div class="person-name">
            <span style="font-size: 1.25rem; font-weight: 700;">FirstName LastName</span>
            <span style="color: #a7b1b7;">pronouns</span>
            <span>Title One</span>
            <span>Title Two</span>
            <span style="text-transform: uppercase; color: #a7b1b7;">Primary Unit Name</span>
        </div>

        <div class="person-contact">
            <div class="icon">
                <span class="icon-envelope"></span>
                <div><strong>Email</strong> name.#@osu.edu</div>
            </div>

            <div class="icon">
                <span class="icon-phone"></span>
                <div><strong>Phone</strong> 123-456-7890</div>
            </div>
        </div>
        <div class="person-image">
            <img class="bux-quote__image" style="position:relative;" src=../../images/placeholders/bux-image-placeholder-1-1.png alt="">
        </div>
        <!-- end person -->
    </li>

    <li class="bux-grid__cell bux-grid__cell--12 person-row bux-mar-top-sp-32">
        <!-- start person -->
        <div class="person-name">
            <span style="font-size: 1.25rem; font-weight: 700;">FirstName LastName</span>
            <span style="color: #a7b1b7;">pronouns</span>
            <span>Title One</span>
            <span>Title Two</span>
            <span style="text-transform: uppercase; color: #a7b1b7;">Primary Unit Name</span>
        </div>

        <div class="person-contact">
            <div class="icon">
                <span class="icon-envelope"></span>
                <div><strong>Email</strong> name.#@osu.edu</div>
            </div>

            <div class="icon">
                <span class="icon-phone"></span>
                <div><strong>Phone</strong> 123-456-7890</div>
            </div>
        </div>
        <div class="person-image">
            <img class="bux-quote__image" style="position:relative;" src=../../images/placeholders/bux-image-placeholder-1-1.png alt="">
        </div>
        <!-- end person -->
    </li>

    <li class="bux-grid__cell bux-grid__cell--12 person-row bux-mar-top-sp-32">
        <!-- start person -->
        <div class="person-name">
            <span style="font-size: 1.25rem; font-weight: 700;">FirstName LastName</span>
            <span style="color: #a7b1b7;">pronouns</span>
            <span>Title One</span>
            <span>Title Two</span>
            <span style="text-transform: uppercase; color: #a7b1b7;">Primary Unit Name</span>
        </div>

        <div class="person-contact">
            <div class="icon">
                <span class="icon-envelope"></span>
                <div><strong>Email</strong> name.#@osu.edu</div>
            </div>

            <div class="icon">
                <span class="icon-phone"></span>
                <div><strong>Phone</strong> 123-456-7890</div>
            </div>
        </div>
        <div class="person-image">
            <img class="bux-quote__image" style="position:relative;" src=../../images/placeholders/bux-image-placeholder-1-1.png alt="">
        </div>
        <!-- end person -->
    </li>

</ul>
 
<div class="bux-grid__cell bux-grid__cell--12@sm">
            
    {% render '@breadcrumb' %} 
    <h1>H1 page title</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>

<ul class="bux-grid">
{% for i in 0..5 %}
    <li class="bux-grid__cell bux-grid__cell--12 person-row bux-mar-top-sp-32">
          <!-- start person -->
        <div class="person-name"> 
            <span style="font-size: 1.25rem; font-weight: 700;">FirstName LastName</span>
            <span style="color: #a7b1b7;">pronouns</span>
            <span>Title One</span>
            <span>Title Two</span>
            <span style="text-transform: uppercase; color: #a7b1b7;">Primary Unit Name</span>
        </div>
    
        <div class="person-contact"> 
           <div class="icon">
                <span class="icon-envelope"></span>
                <div><strong>Email</strong> name.#@osu.edu</div>
            </div>
            
            <div class="icon">
                <span class="icon-phone"></span>
                <div><strong>Phone</strong> 123-456-7890</div>
            </div>
        </div>
        <div class="person-image">
            <img class="bux-quote__image" style="position:relative;" src={{ "/images/placeholders/bux-image-placeholder-1-1.png"|path }} alt="">
        </div>
            <!-- end person -->
  </li>

{% endfor %}
</ul>
 
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.