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

    <section class="bux-hero  bux-hero--card-left bux-hero--3x2">

        <div id="bux-hero__carousel-501267743-items" class="bux-hero__carousel-items">
            <div id="bux-hero__carousel-501267743-tab-1" class="bux-hero__container  showing">

                <div class="bux-hero__content">

                    <h2 class="bux-hero__header">
                        <span>Headline lorem ipsum</span>
                    </h2>

                    <div class="bux-hero__subheader">
                        <span>Subhead lorem ipsum dolara met</span>
                    </div>
                    <a class="bux-button bux-button--alt" href="#">Call to Action</a>

                </div>
                <div class="bux-hero__image-container">

                    <div class="bux-hero__image bux-hero__image--3x2 ">

                        <img class="bux-image " src="/images/placeholders/osu-bux-5.jpg" alt="Graduates performing the O-H-I-O pose" />

                    </div>
                </div>

            </div>
        </div>

    </section>

    <div class="bux-cta-collection 
                        bux-cta-collection--icons
                        ">
        <ul>
            <li>
                <a class="bux-cta-collection__link" href=#>
                    <span class="icon icon-graph-pie" aria-hidden="true"></span>
                    Ipsum Dolar
                </a>
            </li>
            <li>
                <a class="bux-cta-collection__link" href=#>
                    <span class="icon icon-user" aria-hidden="true"></span>
                    Larenoto
                </a>
            </li>
            <li>
                <a class="bux-cta-collection__link" href=#>
                    <span class="icon icon-envelope" aria-hidden="true"></span>
                    Curabitur libero
                </a>
            </li>
            <li>
                <a class="bux-cta-collection__link" href=#>
                    <span class="icon icon-graph-pie" aria-hidden="true"></span>
                    Nulla rutrum nulla
                </a>
            </li>
        </ul>
    </div>

    <div class="head-block">

        <div class="site-headline"> I am a Site Headline</div>

        <div class="site-subheadline"> This is featured on the landing page design template but
            isn't not offered as a component. Lorem ipsum dolor sit
            amet. Lorem ipsum dolor sit amet.</div>
    </div>

    <div class="full-bleed full-bleed-background-ltgray bux-mar-top-sp-32">

        <ul class="bux-factoid">

            <li class="bux-factoid__item">
                <span class="bux-factoid__stat">
                    200+
                </span>
                <span class="bux-factoid__text">
                    lorem ipsum dolor sit amet, consectetur adipiscing elit
                </span>
            </li>

            <li class="bux-factoid__item">
                <span class="bux-factoid__stat">
                    #1
                </span>
                <span class="bux-factoid__text">
                    lorem ipsum dolor sit amet, consectetur adipiscing elit
                </span>
            </li>

            <li class="bux-factoid__item">
                <span class="bux-factoid__stat">
                    9<sup>th</sup>
                </span>
                <span class="bux-factoid__text">
                    lorem ipsum dolor sit amet, consectetur adipiscing elit
                </span>
            </li>
        </ul>
    </div>
</div>

<ul class="bux-grid">
    <li class="bux-grid__cell bux-grid__cell--12@sm bux-grid__cell--6@md bux-grid__cell--3@lg 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--6@md bux-grid__cell--3@lg 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--6@md bux-grid__cell--3@lg 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--6@md bux-grid__cell--3@lg 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>

<div class="bux-grid__cell bux-grid__cell--12 bux-mar-top-sp-32">

    <div class="bux-featured-card bux-grid bux-grid--no-gutters  bux-featured-card--image-left ">

        <div class="bux-featured-card--wrapper bux-grid__cell bux-grid__cell--12 bux-grid__cell--5@md">

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

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

                    <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>
                    <a class="bux-button bux-button--alt" href="#">Call to Action</a>
                </div>
            </div>
        </div>

        <div class="bux-featured-card--image bux-grid__cell bux-grid__cell--12 bux-grid__cell--7@md">

            <img class="bux-image " src="https://bux.osu.edu/img/example-images/osu-bux-2.jpg" alt="A marching band memeber high-fiving a crowd" />

        </div>

    </div>
</div>

<div class="full-bleed full-bleed-background-ltgray bux-mar-top-sp-32">
    <div class="grid-block-title">
        <div class="grid-block-title-header">Latest News</div>
        <div><a class="bux-text-link" href="#">View more news</a></div>
    </div>
    <div class="full-bleed-card">

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

        </ul>

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

    {% render '@hero' %}
    {% render '@cta-collection--with-ui-icons' %}

    <div class="head-block"> 

    <div class="site-headline"> I am a Site Headline</div>
    
    <div class="site-subheadline"> This is featured on the landing page design template but 
        isn't not offered as a component. Lorem ipsum dolor sit
        amet. Lorem ipsum dolor sit amet.</div>
    </div>
    
    <div class="full-bleed full-bleed-background-ltgray bux-mar-top-sp-32">
        {% render '@factoid' %}
    </div>
</div>

<ul class="bux-grid">
{% for i in 0..3 %}
<li class="bux-grid__cell bux-grid__cell--12@sm bux-grid__cell--6@md bux-grid__cell--3@lg bux-mar-top-sp-24">
    {% render '@card' %}
</li>
{% endfor %}
</ul>

<div class="bux-grid__cell bux-grid__cell--12 bux-mar-top-sp-32">
    {% render '@featured-card--image-left' %}
</div>

<div class="full-bleed full-bleed-background-ltgray bux-mar-top-sp-32">
    <div class="grid-block-title">
        <div class="grid-block-title-header">Latest News</div>
        <div><a class="bux-text-link" href="#">View more news</a></div>
    </div>
 <div class="full-bleed-card">

<ul class="bux-grid">
 {% for i in 0..2 %}
  <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>

</div>
</div>
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.