<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>

    <div class="hero-with-heading">
        <div class="bux-hero__image-fullwidth">
            <img class="bux-image " src=/images/placeholders/bux-image-placeholder-16-9.png alt="">
        </div>
        <div class="heading-one">
            <h1>H1 page title</h1>
        </div>
    </div>

    <div class="page-subhead bux-mar-top-sp-16">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 class="bux-mar-top-sp-24">
        <p>Body copy lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet rhoncus velit, nec dapibus velit varius eget. Sed lobortis
            interdum metus quis posuere. Mauris ac tempus quam, eget volutpat magna. Suspendisse aliquet eros a mauris luctus pretium. Mauris quis
            tellus vel ligula nibus ecitur. Praesent venenatis nulla in congue vehicula. In hac habitasse platea dictumst. Integer non viverra purus.</p>

        <p>In varius feugiat dolor nec dapibus. Aliquam quis lacinia magna. Inline link example fusce vestibulum iaculis ex, a tincidunt felis. In vel diam
            vitae sapien placerat aliquam ut cursus justo. In hac habitasse platea dictumst. Proin suscipit, orci a scelerisque porttitor, ligula lorem cursus
            metus, a semper diam quam quis mauris. Fusce auctor ornare odio a dignissim.</p>
    </div>

    <div class="bux-mar-top-sp-24">
        <h2>H2 Heading Two</h2>

        <div class="bux-accordion" data-allow-multiple>
            <h3 class="bux-accordion__heading">
                <button id="bux-accordion__trigger--1" type="button" class="bux-accordion__trigger" aria-controls="bux-accordion__panel--1" aria-expanded="false">
                    <span class="bux-accordion__icon" aria-hidden="true"></span>
                    <span class="bux-accordion__title">
                        Title of Accordion
                    </span>
                </button>
            </h3>
            <div id="bux-accordion__panel--1" class="bux-accordion__panel" role="region" aria-labelledby="bux-accordion__trigger--1" hidden>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
            <h3 class="bux-accordion__heading">
                <button id="bux-accordion__trigger--2" type="button" class="bux-accordion__trigger" aria-controls="bux-accordion__panel--2" aria-expanded="false">
                    <span class="bux-accordion__icon" aria-hidden="true"></span>
                    <span class="bux-accordion__title">
                        Title of Accordion
                    </span>
                </button>
            </h3>
            <div id="bux-accordion__panel--2" class="bux-accordion__panel" role="region" aria-labelledby="bux-accordion__trigger--2" hidden>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
            <h3 class="bux-accordion__heading">
                <button id="bux-accordion__trigger--3" type="button" class="bux-accordion__trigger" aria-controls="bux-accordion__panel--3" aria-expanded="false">
                    <span class="bux-accordion__icon" aria-hidden="true"></span>
                    <span class="bux-accordion__title">
                        Title of Accordion
                    </span>
                </button>
            </h3>
            <div id="bux-accordion__panel--3" class="bux-accordion__panel" role="region" aria-labelledby="bux-accordion__trigger--3" hidden>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
        </div>
    </div>

    <div class="bux-mar-top-sp-24">
        <h2>H2 Heading Two</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        <ul class='bux-list-ul'>
            <li>List item 1<ul>
                    <li>List item 1A</li>
                    <li>List item 1B</li>
                </ul>
            </li>
            <li>List item 2</li>
            <li>List item 3<ul>
                    <li>List item 3A<ul>
                            <li>List item 3Ai</li>
                            <li>List item 3Aii</li>
                        </ul>
                    </li>
                    <li>List item 3B</li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="bux-mar-top-sp-24">

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet rhoncus velit, nec dapibus velit varius eget.
            Sed lobortis interdum metus quis posuere. Mauris ac tempus quam, eget volutpat magna.</p>
        <ol class="bux-list-ol">
            <li>List item 1<ol>
                    <li>List item 1A</li>
                    <li>List item 1B</li>
                </ol>
            </li>
            <li>List item 2</li>
            <li>List item 3<ol>
                    <li>List item 3A<ol>
                            <li>List item 3Ai</li>
                            <li>List item 3Aii</li>
                        </ol>
                    </li>
                    <li>List item 3B</li>
                </ol>
            </li>
        </ol>
    </div>
    <div class="bux-mar-top-sp-24">

        <div class="bux-panel">
            <h5 class="bux-panel__heading">
                Title of Panel
            </h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <a href="#" class="bux-button">Call to Action</a>
        </div>
    </div>

    <div class="bux-mar-top-sp-24">
        <h2>H2 Heading Two</h2>
        <h3>H3 Heading Three</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet
            rhoncus velit, nec dapibus velit varius eget. Sed lobortis
            interdum metus quis posuere. Mauris ac tempus quam, eget volutpat magna.</p>
        <h3>H3 Heading Three</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet
            rhoncus velit, nec dapibus velit varius eget. Sed lobortis
            interdum metus quis posuere. Mauris ac tempus quam, eget volutpat magna.</p>
    </div>
</div>
{% render '@details-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.