Basic responsive layouts

Use these examples to style your content in the CMS editor

Two equal columns

Example columns with text

Consequatur et voluptatibus officiis sed quo laudantium. Tempora ducimus qui et porro consequuntur quisquam. Aut quia quisquam adipisci et est sunt modi iusto. In velit velit rem et et illum minima. Ea blanditiis et delectus saepe consequatur vel non. Dolorum quia reiciendis in asperiores incidunt autem. Alias et nesciunt numquam qui deleniti temporibus impedit.

In reprehenderit maiores voluptatem quas. Est sed consectetur reiciendis. Fugit sit sequi et sed eligendi. Sint modi quam voluptatem expedita adipisci. Consectetur repellat est laudantium et odio. Maiores blanditiis labore mollitia. Voluptatem et aut officia cupiditate ut. Veniam et voluptatibus et est explicabo eligendi suscipit.

Example grid

Et vel enim quas sed.

Vel illum earum reprehenderit et occaecati quasi ut est.

Soluta natus porro ipsa a. Sed aut velit culpa esse.

Ea eum facilis consequatur enim.

<div class="grid-two-col-layout">
    <!-- Item one -->
    <div>
        <img src="https://base.wayne.edu/styleguide/image/425x240" alt="Placeholder image">
        <p>Est deleniti et cupiditate.</p>
    </div>

    <!-- Item two -->
    <div>
        <img src="https://base.wayne.edu/styleguide/image/425x240" alt="Placeholder image">
        <p>Non soluta est ut itaque qui.</p>
    </div>

    <!-- Add more items to make a grid -->
</div>

Two columns image left

Maiores blanditiis voluptatibus dolorem doloribus aliquid. Molestiae nobis sed dolores nobis voluptate ad nemo ducimus. Esse qui accusamus deserunt. Beatae est necessitatibus dicta ut.

Ut sed sint dolorem et cumque a. Temporibus ad praesentium et laborum provident. Non non asperiores incidunt architecto quaerat aliquid. Minus sit ex iste eos pariatur occaecati labore eum.

<div class="two-col-layout">
    <div class="md:w-1/3 flex-shrink-0">
        <img src="https://via.placeholder.com/600x400" alt="Your image description">
    </div>
    <div>
        <p>Id ut quas quod quos repellat libero deserunt.</p>
        <p>Dicta mollitia ea perspiciatis et veniam assumenda.</p>
    </div>
</div>

Two columns image right

Eum debitis perspiciatis eos aut dolor. Suscipit sapiente ipsam nemo corrupti et fuga consequatur impedit. Molestiae itaque eius eum tempora sit repudiandae.

In quidem eius ad iure non. Minus neque ipsam aliquid. Dolor explicabo atque dolor.

<div class="two-col-layout">
    <div class="w-full">
        <p>Et architecto accusamus dicta et molestiae molestias.</p>
        <p>Ad ut quo est voluptas aut.</p>
    </div>
    <div class="md:w-1/3 flex-shrink-0">
        <img src="https://via.placeholder.com/600x400" alt="Your image description">
    </div>
</div>

Two columns with a list

Molestiae laboriosam sed repudiandae quia. Quia voluptas minus repellendus. Modi quis adipisci et occaecati modi. Velit omnis fugiat consequatur in. Est vitae eius harum quod. Error enim eum harum illo nobis.

Mollitia et

<div class="two-col-layout">
    <div class="w-full">
        <p>Aliquid non excepturi ea ut.</p>
        <p><a href="#" class="button">Est et</a></p>
    </div>
    <div class="md:w-1/3 flex-shrink-0">
        <ul>
            <li><a href="#">Aut similique aut dignissimos</a></li>
            <li><a href="#">Placeat dolorem adipisci quia</a></li>
        </ul>
    </div>
</div>

Three equal columns

Iure molestiae voluptatem eum perspiciatis tenetur harum.

Expedita doloremque veniam aliquid.

Non magni suscipit aut distinctio magnam.

Architecto odit maxime aut vel suscipit corrupti.

Architecto suscipit porro tenetur ratione sit.

<div class="grid-three-col-layout">
    <!-- Item one -->
    <div>
        <img src="/styleguide/image/268x268" alt="">
        <p>Eos dolor qui dicta a. Quod nesciunt quis ut.</p>
    </div>

    <!-- Item two -->
    <div>
        <img src="/styleguide/image/268x268" alt="">
        <p>Laborum iusto sit sint dolore et inventore sequi soluta.</p>
    </div>

    <!-- Item three -->
    <div>
        <img src="/styleguide/image/268x268" alt="">
        <p>Sequi eius suscipit commodi quas.</p>
    </div>

    <!-- Add more items to make a grid -->
</div>