BUX Component Development Platform

Story 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>Two Columns Starter File</h1>
</div>

<div class="bux-grid__cell bux-grid__cell--12 bux-mar-tb-sp-48">

    <div class="bux-card bux-card--horizontal">
        <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>
</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 bux-card--storytelling">
            <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">

                <span class="bux-card__taxonomy">
                    Optional Taxonomy
                </span>

                <h3 class="bux-card__heading">
                    <a href="#" class="bux-card__heading--storytelling-link">
                        <span>Card Heading</span>
                    </a>
                </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>
                <span class="bux-card__read-time">3-minute read</span>
            </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 bux-card--storytelling">
            <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">

                <span class="bux-card__taxonomy">
                    Optional Taxonomy
                </span>

                <h3 class="bux-card__heading">
                    <a href="#" class="bux-card__heading--storytelling-link">
                        <span>Card Heading</span>
                    </a>
                </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>
                <span class="bux-card__read-time">3-minute read</span>
            </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 bux-card--storytelling">
            <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">

                <span class="bux-card__taxonomy">
                    Optional Taxonomy
                </span>

                <h3 class="bux-card__heading">
                    <a href="#" class="bux-card__heading--storytelling-link">
                        <span>Card Heading</span>
                    </a>
                </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>
                <span class="bux-card__read-time">3-minute read</span>
            </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 bux-card--storytelling">
            <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">

                <span class="bux-card__taxonomy">
                    Optional Taxonomy
                </span>

                <h3 class="bux-card__heading">
                    <a href="#" class="bux-card__heading--storytelling-link">
                        <span>Card Heading</span>
                    </a>
                </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>
                <span class="bux-card__read-time">3-minute read</span>
            </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 bux-card--storytelling">
            <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">

                <span class="bux-card__taxonomy">
                    Optional Taxonomy
                </span>

                <h3 class="bux-card__heading">
                    <a href="#" class="bux-card__heading--storytelling-link">
                        <span>Card Heading</span>
                    </a>
                </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>
                <span class="bux-card__read-time">3-minute read</span>
            </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 bux-card--storytelling">
            <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">

                <span class="bux-card__taxonomy">
                    Optional Taxonomy
                </span>

                <h3 class="bux-card__heading">
                    <a href="#" class="bux-card__heading--storytelling-link">
                        <span>Card Heading</span>
                    </a>
                </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>
                <span class="bux-card__read-time">3-minute read</span>
            </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 bux-card--storytelling">
            <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">

                <span class="bux-card__taxonomy">
                    Optional Taxonomy
                </span>

                <h3 class="bux-card__heading">
                    <a href="#" class="bux-card__heading--storytelling-link">
                        <span>Card Heading</span>
                    </a>
                </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>
                <span class="bux-card__read-time">3-minute read</span>
            </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 bux-card--storytelling">
            <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">

                <span class="bux-card__taxonomy">
                    Optional Taxonomy
                </span>

                <h3 class="bux-card__heading">
                    <a href="#" class="bux-card__heading--storytelling-link">
                        <span>Card Heading</span>
                    </a>
                </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>
                <span class="bux-card__read-time">3-minute read</span>
            </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 bux-card--storytelling">
            <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">

                <span class="bux-card__taxonomy">
                    Optional Taxonomy
                </span>

                <h3 class="bux-card__heading">
                    <a href="#" class="bux-card__heading--storytelling-link">
                        <span>Card Heading</span>
                    </a>
                </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>
                <span class="bux-card__read-time">3-minute read</span>
            </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 bux-card--storytelling">
            <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">

                <span class="bux-card__taxonomy">
                    Optional Taxonomy
                </span>

                <h3 class="bux-card__heading">
                    <a href="#" class="bux-card__heading--storytelling-link">
                        <span>Card Heading</span>
                    </a>
                </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>
                <span class="bux-card__read-time">3-minute read</span>
            </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 bux-card--storytelling">
            <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">

                <span class="bux-card__taxonomy">
                    Optional Taxonomy
                </span>

                <h3 class="bux-card__heading">
                    <a href="#" class="bux-card__heading--storytelling-link">
                        <span>Card Heading</span>
                    </a>
                </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>
                <span class="bux-card__read-time">3-minute read</span>
            </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 bux-card--storytelling">
            <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">

                <span class="bux-card__taxonomy">
                    Optional Taxonomy
                </span>

                <h3 class="bux-card__heading">
                    <a href="#" class="bux-card__heading--storytelling-link">
                        <span>Card Heading</span>
                    </a>
                </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>
                <span class="bux-card__read-time">3-minute read</span>
            </div>
        </div>
    </li>
</ul>
 
<div class="bux-grid__cell bux-grid__cell--12@sm">
{% render '@breadcrumb' %}

<h1>Two Columns Starter File</h1>
</div>

<div class="bux-grid__cell bux-grid__cell--12 bux-mar-tb-sp-48">
    {% render '@card--horizontal' %}
</div>

<ul class="bux-grid">
    {% for i in 0..11 %}
        <li class="bux-grid__cell bux-grid__cell--12@sm bux-grid__cell--4@md bux-mar-top-sp-24">
            {% render '@card--storytelling' %}
        </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.