BUX Component Development Platform

Cards 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>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@sm bux-grid__cell--4@md bux-mar-top-sp-24">

        <div class="bux-card ">
            <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>

            <img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt=" " />

            <div class="bux-card__content">

                <h3 class="bux-card__heading">
                    <span>Card Heading</span>
                </h3>

                <div class="bux-card__body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </div>
                <div class="bux-card__cta">
                    <a href="#">
                        <span>Call to Action</span>
                    </a>
                </div>
            </div>
        </div>
    </li>
    <li class="bux-grid__cell bux-grid__cell--12@sm bux-grid__cell--4@md bux-mar-top-sp-24">

        <div class="bux-card ">
            <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>

            <img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt=" " />

            <div class="bux-card__content">

                <h3 class="bux-card__heading">
                    <span>Card Heading</span>
                </h3>

                <div class="bux-card__body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </div>
                <div class="bux-card__cta">
                    <a href="#">
                        <span>Call to Action</span>
                    </a>
                </div>
            </div>
        </div>
    </li>
    <li class="bux-grid__cell bux-grid__cell--12@sm bux-grid__cell--4@md bux-mar-top-sp-24">

        <div class="bux-card ">
            <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>

            <img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt=" " />

            <div class="bux-card__content">

                <h3 class="bux-card__heading">
                    <span>Card Heading</span>
                </h3>

                <div class="bux-card__body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </div>
                <div class="bux-card__cta">
                    <a href="#">
                        <span>Call to Action</span>
                    </a>
                </div>
            </div>
        </div>
    </li>
    <li class="bux-grid__cell bux-grid__cell--12@sm bux-grid__cell--4@md bux-mar-top-sp-24">

        <div class="bux-card ">
            <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>

            <img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt=" " />

            <div class="bux-card__content">

                <h3 class="bux-card__heading">
                    <span>Card Heading</span>
                </h3>

                <div class="bux-card__body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </div>
                <div class="bux-card__cta">
                    <a href="#">
                        <span>Call to Action</span>
                    </a>
                </div>
            </div>
        </div>
    </li>
    <li class="bux-grid__cell bux-grid__cell--12@sm bux-grid__cell--4@md bux-mar-top-sp-24">

        <div class="bux-card ">
            <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>

            <img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt=" " />

            <div class="bux-card__content">

                <h3 class="bux-card__heading">
                    <span>Card Heading</span>
                </h3>

                <div class="bux-card__body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </div>
                <div class="bux-card__cta">
                    <a href="#">
                        <span>Call to Action</span>
                    </a>
                </div>
            </div>
        </div>
    </li>
    <li class="bux-grid__cell bux-grid__cell--12@sm bux-grid__cell--4@md bux-mar-top-sp-24">

        <div class="bux-card ">
            <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>

            <img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt=" " />

            <div class="bux-card__content">

                <h3 class="bux-card__heading">
                    <span>Card Heading</span>
                </h3>

                <div class="bux-card__body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </div>
                <div class="bux-card__cta">
                    <a href="#">
                        <span>Call to Action</span>
                    </a>
                </div>
            </div>
        </div>
    </li>
    <li class="bux-grid__cell bux-grid__cell--12@sm bux-grid__cell--4@md bux-mar-top-sp-24">

        <div class="bux-card ">
            <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>

            <img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt=" " />

            <div class="bux-card__content">

                <h3 class="bux-card__heading">
                    <span>Card Heading</span>
                </h3>

                <div class="bux-card__body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </div>
                <div class="bux-card__cta">
                    <a href="#">
                        <span>Call to Action</span>
                    </a>
                </div>
            </div>
        </div>
    </li>
    <li class="bux-grid__cell bux-grid__cell--12@sm bux-grid__cell--4@md bux-mar-top-sp-24">

        <div class="bux-card ">
            <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>

            <img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt=" " />

            <div class="bux-card__content">

                <h3 class="bux-card__heading">
                    <span>Card Heading</span>
                </h3>

                <div class="bux-card__body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </div>
                <div class="bux-card__cta">
                    <a href="#">
                        <span>Call to Action</span>
                    </a>
                </div>
            </div>
        </div>
    </li>
    <li class="bux-grid__cell bux-grid__cell--12@sm bux-grid__cell--4@md bux-mar-top-sp-24">

        <div class="bux-card ">
            <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>

            <img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt=" " />

            <div class="bux-card__content">

                <h3 class="bux-card__heading">
                    <span>Card Heading</span>
                </h3>

                <div class="bux-card__body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </div>
                <div class="bux-card__cta">
                    <a href="#">
                        <span>Call to Action</span>
                    </a>
                </div>
            </div>
        </div>
    </li>
</ul>
 
{% include '@cards-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.