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="#" rel="noopener">
                    <span class="bux-breadcrumb__link__text bux-link__text--underline">Home</span>
                </a>
            </li>
            <li class="bux-breadcrumb__item">

                <a class="bux-breadcrumb__link" href="#" rel="noopener">
                    <span class="bux-breadcrumb__link__text bux-link__text--underline">Level 1</span>
                </a>
            </li>
            <li class="bux-breadcrumb__item">

                <a class="bux-breadcrumb__link" href="#" rel="noopener">
                    <span class="bux-breadcrumb__link__text bux-link__text--underline">Level 2</span>
                </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" role="group" aria-roledescription="Card" aria-label="Card Heading">

        <div class="bux-card__image-wrapper">

            <img class="bux-image" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="Three young people lay hands on the face of Thompson Library bust" />

        </div>

        <div class="bux-card__content">

            <h3 class="bux-card__heading"><span>Card Heading</span>
                <span class="bux-card__heading-icon" aria-hidden="true"></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 class="bux-card__link" href="#" rel="noopener">
                    <span class="bux-card__link__text">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" role="group" aria-roledescription="Card" aria-label="Card Heading">

            <img class="bux-image" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="Three young people lay hands on the face of Thompson Library bust" />

            <div class="bux-card__content">

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

                <h3 class="bux-card__heading">

                    <a class="bux-card__link bux-card__heading--storytelling-link" href="#" rel="noopener">
                        <span>Card Heading</span>
                        <span class="bux-card__heading-icon" aria-hidden="true"></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" role="group" aria-roledescription="Card" aria-label="Card Heading">

            <img class="bux-image" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="Three young people lay hands on the face of Thompson Library bust" />

            <div class="bux-card__content">

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

                <h3 class="bux-card__heading">

                    <a class="bux-card__link bux-card__heading--storytelling-link" href="#" rel="noopener">
                        <span>Card Heading</span>
                        <span class="bux-card__heading-icon" aria-hidden="true"></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" role="group" aria-roledescription="Card" aria-label="Card Heading">

            <img class="bux-image" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="Three young people lay hands on the face of Thompson Library bust" />

            <div class="bux-card__content">

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

                <h3 class="bux-card__heading">

                    <a class="bux-card__link bux-card__heading--storytelling-link" href="#" rel="noopener">
                        <span>Card Heading</span>
                        <span class="bux-card__heading-icon" aria-hidden="true"></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" role="group" aria-roledescription="Card" aria-label="Card Heading">

            <img class="bux-image" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="Three young people lay hands on the face of Thompson Library bust" />

            <div class="bux-card__content">

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

                <h3 class="bux-card__heading">

                    <a class="bux-card__link bux-card__heading--storytelling-link" href="#" rel="noopener">
                        <span>Card Heading</span>
                        <span class="bux-card__heading-icon" aria-hidden="true"></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" role="group" aria-roledescription="Card" aria-label="Card Heading">

            <img class="bux-image" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="Three young people lay hands on the face of Thompson Library bust" />

            <div class="bux-card__content">

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

                <h3 class="bux-card__heading">

                    <a class="bux-card__link bux-card__heading--storytelling-link" href="#" rel="noopener">
                        <span>Card Heading</span>
                        <span class="bux-card__heading-icon" aria-hidden="true"></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" role="group" aria-roledescription="Card" aria-label="Card Heading">

            <img class="bux-image" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="Three young people lay hands on the face of Thompson Library bust" />

            <div class="bux-card__content">

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

                <h3 class="bux-card__heading">

                    <a class="bux-card__link bux-card__heading--storytelling-link" href="#" rel="noopener">
                        <span>Card Heading</span>
                        <span class="bux-card__heading-icon" aria-hidden="true"></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" role="group" aria-roledescription="Card" aria-label="Card Heading">

            <img class="bux-image" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="Three young people lay hands on the face of Thompson Library bust" />

            <div class="bux-card__content">

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

                <h3 class="bux-card__heading">

                    <a class="bux-card__link bux-card__heading--storytelling-link" href="#" rel="noopener">
                        <span>Card Heading</span>
                        <span class="bux-card__heading-icon" aria-hidden="true"></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" role="group" aria-roledescription="Card" aria-label="Card Heading">

            <img class="bux-image" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="Three young people lay hands on the face of Thompson Library bust" />

            <div class="bux-card__content">

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

                <h3 class="bux-card__heading">

                    <a class="bux-card__link bux-card__heading--storytelling-link" href="#" rel="noopener">
                        <span>Card Heading</span>
                        <span class="bux-card__heading-icon" aria-hidden="true"></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" role="group" aria-roledescription="Card" aria-label="Card Heading">

            <img class="bux-image" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="Three young people lay hands on the face of Thompson Library bust" />

            <div class="bux-card__content">

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

                <h3 class="bux-card__heading">

                    <a class="bux-card__link bux-card__heading--storytelling-link" href="#" rel="noopener">
                        <span>Card Heading</span>
                        <span class="bux-card__heading-icon" aria-hidden="true"></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" role="group" aria-roledescription="Card" aria-label="Card Heading">

            <img class="bux-image" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="Three young people lay hands on the face of Thompson Library bust" />

            <div class="bux-card__content">

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

                <h3 class="bux-card__heading">

                    <a class="bux-card__link bux-card__heading--storytelling-link" href="#" rel="noopener">
                        <span>Card Heading</span>
                        <span class="bux-card__heading-icon" aria-hidden="true"></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" role="group" aria-roledescription="Card" aria-label="Card Heading">

            <img class="bux-image" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="Three young people lay hands on the face of Thompson Library bust" />

            <div class="bux-card__content">

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

                <h3 class="bux-card__heading">

                    <a class="bux-card__link bux-card__heading--storytelling-link" href="#" rel="noopener">
                        <span>Card Heading</span>
                        <span class="bux-card__heading-icon" aria-hidden="true"></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" role="group" aria-roledescription="Card" aria-label="Card Heading">

            <img class="bux-image" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="Three young people lay hands on the face of Thompson Library bust" />

            <div class="bux-card__content">

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

                <h3 class="bux-card__heading">

                    <a class="bux-card__link bux-card__heading--storytelling-link" href="#" rel="noopener">
                        <span>Card Heading</span>
                        <span class="bux-card__heading-icon" aria-hidden="true"></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.