Basic responsive layouts
Use these examples to style your content in the CMS editor
Two equal columns
Example columns with text
Harum repudiandae sit dolor quos. Omnis aliquid id aut et enim sed. Esse molestias iste ipsam eos corporis. Facere eos at facere impedit nihil. Repudiandae adipisci vel vel ad adipisci. Est repudiandae et cum odit. Non iure doloremque ipsa debitis ex quod. Nesciunt qui tenetur in dignissimos soluta amet.
Est animi et laboriosam numquam. Ipsam eaque culpa qui assumenda itaque. Nihil blanditiis et enim id et. Facilis debitis nihil facilis qui ut. Sed et et qui ut beatae velit. Aliquid ut dolores veritatis earum quam. Et quo id provident aliquam incidunt sunt. Consequatur error voluptate consectetur repudiandae.
Example grid
Ipsam inventore numquam voluptatum temporibus.
Enim laboriosam voluptates maiores eum corrupti architecto.
Ut repellat qui illum aut corporis ea.
Qui aut ea autem tenetur voluptas non sint eos.
<div class="grid-two-col-layout">
<!-- Item one -->
<div>
<img src="https://base.wayne.edu/styleguide/image/425x240" alt="Placeholder image">
<p>Similique ut et non aut.</p>
</div>
<!-- Item two -->
<div>
<img src="https://base.wayne.edu/styleguide/image/425x240" alt="Placeholder image">
<p>Autem dicta neque vero sequi.</p>
</div>
<!-- Add more items to make a grid -->
</div>
Two columns image left
Placeat aut nisi autem vel sint aliquam sit ut. Ipsa totam et est voluptatem non. Aliquid aut dignissimos quam accusamus libero.
Dolores sit sapiente harum ut. Architecto eos et soluta minima quia in reiciendis tempora. Reiciendis itaque ex quos id iusto.
<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>Saepe sit consequatur voluptatem dignissimos unde.</p>
<p>Veritatis autem et laborum numquam et et.</p>
</div>
</div>
Two columns image right
Iste autem architecto corporis quod asperiores quo modi. Pariatur sed et doloribus iure. Magnam aliquam aut sint laudantium et velit quia. Distinctio esse dolores aspernatur reprehenderit veritatis maiores qui.
Accusantium accusamus molestiae quo aut reiciendis et. Aspernatur dolorum nisi temporibus rerum libero ullam. Repellendus fugiat voluptatem quia eum autem nihil facilis id. Repellat officia aut et vel aspernatur.
<div class="two-col-layout">
<div class="w-full">
<p>Culpa architecto sint magni deleniti.</p>
<p>Ut ipsa et et repellendus.</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
Ea iste ea et quo ut veritatis voluptatem distinctio. Illum enim quis recusandae quia dolores ut nihil nihil. Quod quasi omnis id ipsam dolorem. Eaque nesciunt exercitationem vel unde quidem et. Sequi voluptates consequatur nihil. Velit rerum ex quo fugit laborum. Nihil odit nihil aut ipsam vel. Est repellendus exercitationem sit voluptates qui iure ea atque. Impedit error excepturi sed minus.
<div class="two-col-layout">
<div class="w-full">
<p>Eaque dolores non temporibus et doloribus.</p>
<p><a href="#" class="button">Quos laborum</a></p>
</div>
<div class="md:w-1/3 flex-shrink-0">
<ul>
<li><a href="#">Ullam sunt facilis ipsum</a></li>
<li><a href="#">Doloremque repellat nesciunt cum</a></li>
</ul>
</div>
</div>
Three equal columns
Natus est architecto quidem.
Saepe nam molestias dicta nisi.
Velit voluptas aut ea id. Ut culpa debitis rerum nisi qui.
Fugiat rerum eos est ut voluptatem voluptatum quod.
Omnis id porro est quia commodi at.
<div class="grid-three-col-layout">
<!-- Item one -->
<div>
<img src="/styleguide/image/268x268" alt="">
<p>Eum cumque qui ratione doloremque.</p>
</div>
<!-- Item two -->
<div>
<img src="/styleguide/image/268x268" alt="">
<p>Ipsam iste non fuga rem.</p>
</div>
<!-- Item three -->
<div>
<img src="/styleguide/image/268x268" alt="">
<p>Inventore laborum odio ad non.</p>
</div>
<!-- Add more items to make a grid -->
</div>