BUX Component Development Platform

Story No Sidebar 

<div class="bux-grid__cell bux-grid__cell--12 story-head bux-mar-top-sp-24">
    <span class="bux-card__read-time">3-minute read</span>

    <h1>H1 page title</h1>
    <div class="page-subhead" style="border-bottom: none;">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>

    <!-- start byline and social -->
    <div class="story-by-social">
        <div>
            <p class="sm-sans">By FirstName LastName</p>
            <p class="sm-sans">Month Day, Year</p>
        </div>

        <ul class="bux-social-links bux-social-links--light">
            <li class="bux-social-links__item bux-social-links__item--Facebook">
                <a class="bux-social-links__link" href="https://www.facebook.com/osu/" target="_blank">
                    <span class="visually-hidden">Facebook profile — external</span>
                    <span class="icon icon-facebook" aria-hidden="true"></span>
                </a>
            </li>
            <li class="bux-social-links__item bux-social-links__item--Instagram">
                <a class="bux-social-links__link" href="https://www.instagram.com/theohiostateuniversity/" target="_blank">
                    <span class="visually-hidden">Instagram profile — external</span>
                    <span class="icon icon-instagram" aria-hidden="true"></span>
                </a>
            </li>
            <li class="bux-social-links__item bux-social-links__item--X">
                <a class="bux-social-links__link" href="https://twitter.com/OhioState" target="_blank">
                    <span class="visually-hidden">X profile — external</span>
                    <span class="icon icon-x" aria-hidden="true"></span>
                </a>
            </li>
            <li class="bux-social-links__item bux-social-links__item--LinkedIn">
                <a class="bux-social-links__link" href="https://www.linkedin.com/school/the-ohio-state-university/" target="_blank">
                    <span class="visually-hidden">LinkedIn profile — external</span>
                    <span class="icon icon-linkedin" aria-hidden="true"></span>
                </a>
            </li>
            <li class="bux-social-links__item bux-social-links__item--YouTube">
                <a class="bux-social-links__link" href="https://www.youtube.com/user/ohiostateuniversity" target="_blank">
                    <span class="visually-hidden">YouTube profile — external</span>
                    <span class="icon icon-youtube" aria-hidden="true"></span>
                </a>
            </li>
            <li class="bux-social-links__item bux-social-links__item--TikTok">
                <a class="bux-social-links__link" href="https://www.tiktok.com/@theohiostateuniversity" target="_blank">
                    <span class="visually-hidden">TikTok profile — external</span>
                    <span class="icon icon-tiktok" aria-hidden="true"></span>
                </a>
            </li>
        </ul>

    </div>
    <!-- end byline and social -->
    <img class="bux-image bux-mar-top-sp-24" src=../../images/placeholders/bux-image-placeholder-16-9.png alt="">
    <p class="caption">Cloud bread mixtape cornhole, forage godard organic retro knausgaard. Ethical
        small batch mumblecore drinking vinegar.</p>

    <!-- end image with caption -->

</div>

<div class="bux-grid__cell bux-grid__cell--12@sm bux-grid__cell--3@md bux-mar-top-sp-24 left-column">
    <ul class="bux-grid">
        <li class="bux-mar-bottom-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-mar-bottom-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 class="bux-grid__cell bux-grid__cell--12@sm bux-grid__cell--9@md bux-mar-top-sp-24">
    <!-- start content area with image-->
    <div class="body-with-image">
        <div>
            <p>Advance innovations and solve unrelenting problems at a scale few others can match big, lively and f
                ull of opportunity empower people and their potential tincidunt venenatis ex nec aliquet Wexner Medical
                Center biodiversity blending creativity and analysis to truly be at the forefront of thought aliquam.</p>

            <p>Innovate Buckeyes research Newark faculty and students committed to novel, exciting research that can change
                the planet and confront modern challenges that power is human potential — an astonishing power so elemental,
                the world thrives on it. So vital, the world depends on it Buckeye leaf tbdbitl non magna quis tortor volutpat.</p>

            <p>Bringing together ideas and disciplines to create bold, new connections founded in 1870 commencement
                as a community, we empower people and their potential to envision the unimagined, advance
                innovations and solve unrelenting problems at a scale few others can match — propelling humanity
                forward ornare euismod velit.</p>

        </div>
        <div> <img class="bux-image" src=../../images/placeholders/bux-image-placeholder-4-3.png alt="">
            <p class="caption-with-rule">Cloud bread mixtape cornhole, forage godard organic retro knausgaard. </p>
        </div>
    </div>
    <!-- end content area with image-->
    <!-- start content area -->
    <p>Byrd Polar and Climate Research Center dot the i non magna quis tortor volutpat WOSU
        classroom excellence consectetur congue dolor reflecting our world's medley of ideas,
        beliefs, backgrounds and cultures lorem ipsum that team up north 1870 Skull Session Ohio
        Union scientific community homecoming week.</p>
    <!-- start quote -->
    <div class="bux-mar-tb-sp-48">

        <figure class="bux-quote">

            <img class="bux-image bux-quote__image bux-image--1x1" src="/images/placeholders/osu-bux-4.jpg" alt="" />

            <blockquote class="bux-quote__blockquote" cite="#">
                <p class="bux-quote__text">&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium pretium tempor ut eget loremquen ipsum imperdiet. Lorem ipsum dolar sit amet elit.&rdquo;</p>
            </blockquote>
            <figcaption class="bux-quote__figcaption">
                <div class="bux-quote__author">Source Name</div>
                <cite class="bux-quote__source">Attribution</cite>
            </figcaption>
        </figure>
    </div>

    <!-- end quote -->
    <p>Advance innovations and solve unrelenting problems at a scale few others can match big, lively and f
        ull of opportunity empower people and their potential tincidunt venenatis ex nec aliquet Wexner Medical
        Center biodiversity blending creativity and analysis to truly be at the forefront of thought aliquam.</p>
    <h2>Heading Two</h2>

    <p>Innovate Buckeyes research Newark faculty and students committed to novel, exciting research that can change
        the planet and confront modern challenges that power is human potential — an astonishing power so elemental,
        the world thrives on it. So vital, the world depends on it Buckeye leaf tbdbitl non magna quis tortor volutpat.</p>

    <p>Innovate Buckeyes research Newark faculty and students committed to novel, exciting research that can change
        the planet and confront modern challenges that power is human potential — an astonishing power so elemental,
        the world thrives on it. So vital, the world depends on it Buckeye leaf tbdbitl non magna quis tortor volutpat.</p>
    <!-- end content area -->

</div>
 
<div class="bux-grid__cell bux-grid__cell--12 story-head bux-mar-top-sp-24">
<span class="bux-card__read-time">3-minute read</span>

<h1>H1 page title</h1>
<div class="page-subhead" style="border-bottom: none;">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>


    <!-- start byline and social -->
    <div class="story-by-social">
        <div>
        <p class="sm-sans">By FirstName LastName</p>
        <p class="sm-sans">Month Day, Year</p>
    </div>

{% render '@social-links' %}

</div>
    <!-- end byline and social -->
<img class="bux-image bux-mar-top-sp-24" src={{ "/images/placeholders/bux-image-placeholder-16-9.png"|path }} alt="">
<p class="caption">Cloud bread mixtape cornhole, forage godard organic retro knausgaard. Ethical 
small batch mumblecore drinking vinegar.</p>

<!-- end image with caption -->

</div> 

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

<div class="bux-grid__cell bux-grid__cell--12@sm bux-grid__cell--9@md bux-mar-top-sp-24">
<!-- start content area with image-->
<div class="body-with-image">
    <div>
        <p>Advance innovations and solve unrelenting problems at a scale few others can match big, lively and f
        ull of opportunity empower people and their potential tincidunt venenatis ex nec aliquet Wexner Medical 
        Center biodiversity blending creativity and analysis to truly be at the forefront of thought aliquam.</p>
    
    <p>Innovate Buckeyes research Newark faculty and students committed to novel, exciting research that can change 
    the planet and confront modern challenges that power is human potential — an astonishing power so elemental, 
    the world thrives on it. So vital, the world depends on it Buckeye leaf tbdbitl non magna quis tortor volutpat.</p>
    
    <p>Bringing together ideas and disciplines to create bold, new connections founded in 1870 commencement 
    as a community, we empower people and their potential to envision the unimagined, advance 
    innovations and solve unrelenting problems at a scale few others can match — propelling humanity 
    forward ornare euismod velit.</p>
    
    </div>
    <div> <img class="bux-image" src={{ "/images/placeholders/bux-image-placeholder-4-3.png"|path }} alt="">
        <p class="caption-with-rule">Cloud bread mixtape cornhole, forage godard organic retro knausgaard. </p>
    </div>
    </div>
    <!-- end content area with image-->
    <!-- start content area -->
    <p>Byrd Polar and Climate Research Center dot the i non magna quis tortor volutpat WOSU 
        classroom excellence consectetur congue dolor reflecting our world's medley of ideas, 
        beliefs, backgrounds and cultures lorem ipsum that team up north 1870 Skull Session Ohio 
        Union scientific community homecoming week.</p>
        <!-- start quote -->
<div class="bux-mar-tb-sp-48">
{% render '@quote' %}
</div>

<!-- end quote -->
<p>Advance innovations and solve unrelenting problems at a scale few others can match big, lively and f
    ull of opportunity empower people and their potential tincidunt venenatis ex nec aliquet Wexner Medical 
    Center biodiversity blending creativity and analysis to truly be at the forefront of thought aliquam.</p>
    <h2>Heading Two</h2>

<p>Innovate Buckeyes research Newark faculty and students committed to novel, exciting research that can change 
the planet and confront modern challenges that power is human potential — an astonishing power so elemental, 
the world thrives on it. So vital, the world depends on it Buckeye leaf tbdbitl non magna quis tortor volutpat.</p>

<p>Innovate Buckeyes research Newark faculty and students committed to novel, exciting research that can change 
    the planet and confront modern challenges that power is human potential — an astonishing power so elemental, 
    the world thrives on it. So vital, the world depends on it Buckeye leaf tbdbitl non magna quis tortor volutpat.</p>
<!-- end content area -->

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