Basic responsive layouts

Use these examples to style your content in the CMS editor

Two equal columns

Example columns with text

Vel aspernatur nisi quos ut odio. Autem nemo numquam iure nihil modi hic sint. Ut qui quas doloribus explicabo sunt natus. Rerum expedita quis magni aperiam nemo eveniet et. Enim sit ea vitae sequi suscipit. Dolores et et sit minima sed rerum. Cum quis et vel.

Sequi saepe autem quis et facere dolorem eos quis. Eius possimus alias et aliquid quod voluptatum. Et nesciunt aut exercitationem beatae dolor consequuntur aut. Ut dolore et dolore molestiae nisi deleniti ut optio. Quis eligendi asperiores error doloribus hic nostrum ullam.

Example grid

At at dolores dolorem dolores ut.

Ut inventore sunt earum.

Assumenda sunt ullam eum est dicta.

Dolores fuga qui qui neque deserunt corporis.

<div class="grid-two-col-layout">
    <!-- Item one -->
    <div>
        <img src="https://base.wayne.edu/styleguide/image/425x240" alt="Placeholder image">
        <p>Et est culpa qui illo sint.</p>
    </div>

    <!-- Item two -->
    <div>
        <img src="https://base.wayne.edu/styleguide/image/425x240" alt="Placeholder image">
        <p>Qui quibusdam incidunt minus.</p>
    </div>

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

Two columns image left

Aperiam illo dicta sequi molestias. Velit quasi veritatis omnis quia et aut cupiditate. Doloremque ut labore consequuntur modi odit quibusdam. Minus id corrupti omnis fuga saepe sunt sequi. Iure iste voluptatem est ad rem at rerum id.

Vitae voluptas explicabo maiores et dolor eveniet. Velit tempora veniam ea laudantium sint. Sequi totam vero tempore aliquam animi. Dolorem necessitatibus porro minima perferendis.

<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>Vel corrupti quaerat quo in magnam repellat ut.</p>
        <p>Non minus rerum eligendi aliquid.</p>
    </div>
</div>

Two columns image right

Commodi ipsa quo id placeat reiciendis pariatur quos. Quis nisi qui eos repudiandae et fugiat. Reprehenderit ipsa vel quas vel eum voluptate qui. Laudantium commodi quia animi aperiam voluptas. Ut repudiandae quae in fugiat temporibus fugiat.

Deserunt quis porro quis eius. Ipsam temporibus rerum eaque velit explicabo. Voluptatem dolor nesciunt nihil qui. Quia enim voluptatem ut velit aliquid sit dolorem. Aut ut ea reprehenderit voluptatem labore. Fugiat culpa dolores laborum quis.

<div class="two-col-layout">
    <div class="w-full">
        <p>Doloremque eum nesciunt velit explicabo.</p>
        <p>Sed officia doloribus quia doloribus.</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

Id eius est rerum fuga reiciendis qui. Ipsum asperiores ab rerum ipsum sit necessitatibus nostrum. Voluptatum ab odio ut cumque voluptatum voluptas nesciunt. Tempora consequatur aperiam magnam dolorem. Et voluptas ipsa dolores dolorem. Similique id voluptatibus quae enim.

Aliquam rerum

<div class="two-col-layout">
    <div class="w-full">
        <p>Cupiditate sit et tempore dolor consequatur in.</p>
        <p><a href="#" class="button">Reiciendis iste</a></p>
    </div>
    <div class="md:w-1/3 flex-shrink-0">
        <ul>
            <li><a href="#">Beatae deserunt occaecati magni</a></li>
            <li><a href="#">Ad aut dolorum officia</a></li>
        </ul>
    </div>
</div>

Three equal columns

Distinctio quas quos sed consequatur.

Velit inventore eveniet facere et veritatis.

Et id praesentium facere ut.

Accusantium molestias corporis et molestias nam voluptatum.

Sequi voluptatibus perferendis at aut voluptate et tempora.

<div class="grid-three-col-layout">
    <!-- Item one -->
    <div>
        <img src="/styleguide/image/268x268" alt="">
        <p>Aut velit rerum reiciendis quaerat quidem dolore itaque.</p>
    </div>

    <!-- Item two -->
    <div>
        <img src="/styleguide/image/268x268" alt="">
        <p>Sapiente tenetur ea et cumque repudiandae vero cupiditate.</p>
    </div>

    <!-- Item three -->
    <div>
        <img src="/styleguide/image/268x268" alt="">
        <p>Quae dolores reiciendis aperiam tempore alias ex.</p>
    </div>

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