Content area
Two column layout
Sint pariatur eos aspernatur. Dolore a sint et qui et ducimus explicabo. Ea itaque minus voluptas quia qui. A dicta eius nesciunt architecto enim ipsam.
Molestias iusto omnis perferendis possimus veritatis deleniti sequi. Amet harum dignissimos dolorem facilis. Dolor laborum doloremque ut excepturi ex ducimus praesentium eos.
<div class="row -mx-4 md:flex">
<div class="md:w-1/2 px-4">
<p>At sit dolorem distinctio placeat non aut. Praesentium veritatis repellat modi vitae repellendus qui sunt. Error enim numquam iusto voluptas qui unde cum.</p>
</div>
<div class="md:w-1/2 px-4">
<p>Veritatis voluptas dolore illum. Dolorem occaecati laudantium corrupti alias et iure. Eveniet odio debitis aliquam eligendi et.</p>
</div>
</div>
Three column layout
Vero repudiandae debitis velit consequatur. Dolorem et vel cumque laborum voluptatem itaque unde. Nostrum officia quo ab. Voluptatem veritatis animi exercitationem quam.
Et et voluptatem vitae dolores. Quam et sit tempora nobis. Nihil et occaecati perferendis asperiores quia.
Facilis porro et hic rem qui minus voluptas. Esse officiis et nisi quia.
<div class="row -mx-4 lg:flex">
<div class="lg:w-1/3 px-4">
<p>Dolorum exercitationem placeat nihil quia et architecto earum. Quasi asperiores debitis consequatur veritatis voluptatem eius dolorem.</p>
</div>
<div class="lg:w-1/3 px-4">
<p>Laudantium consequatur veritatis error est ut voluptatem. Asperiores voluptatem animi aut harum vero eaque inventore. Ipsa ex nostrum nesciunt et sint quia.</p>
</div>
<div class="lg:w-1/3 px-4">
<p>Nihil ducimus voluptate ut ex ducimus ab delectus. Qui debitis est earum qui. Et consectetur aut aut nobis sunt. Itaque quidem sed ab a iste.</p>
</div>
</div>
Table
| Image | First name | Last name | |
|---|---|---|---|
| Ryan | Wolf | verla36@gmail.com |
|
| Alysa | Lesch | jaskolski.rebeka@schinner.net |
|
| Jamel | Pfannerstill | greta.baumbach@hotmail.com |
|
| Amanda | Hane | paula.vandervort@tillman.com |
<table class="table-stack">
<caption>Example table with caption</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Abbreviations
WSU
Unordered lists
- First
- Second
- Third
Ordered lists
- First
- Second
- Third
Data lists
- First
- Description of first.
- Second
- Description of second.
- Third
- Description of third.
Blockquote
“Qui cum libero explicabo quae. Aut officia laboriosam at sit. Reiciendis hic odio quibusdam sunt magnam. Officiis voluptate sit qui aperiam neque alias. Corporis assumenda sed perspiciatis facilis consequuntur reprehenderit non. Doloribus facere sit autem consectetur maiores et. Aliquam exercitationem quis voluptas rem repudiandae saepe accusantium. Et nisi deleniti molestiae ullam nemo error.”
“Ipsum nam debitis et aliquid sequi adipisci tempore. Et eos velit eum ex. Aut vel sit quibusdam animi dolores et. Sit iste ut pariatur velit ipsa quo nostrum. Veniam atque dolorem et ut quia.”
— Dr. Adolphus Hartmann PhD
<blockquote>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
<cite>Name or citation</cite>
</blockquote>
PDF links
Links to PDFs will automatically append the file type to the end of the link. Example: download brochure.Buttons
Standard buttonDark button Expanded button
<a href="#" class="button">Standard button</a>
<a href="#" class="button bg-gradient-green text-white">Dark button</a>
<a href="#" class="button expanded">Expanded button</a>
Headers
H1: Ratione perferendis esse corporis.
H2: Eveniet nihil unde quidem quas maiores.
H3: Voluptatem dolores eum deleniti quaerat officiis ut.
H4: Quia et ut nemo aut ut id suscipit blanditiis.
H5: Dolorem harum delectus et voluptatem consequatur.
H6: Consequatur beatae magni dolorem eos nostrum.
Media
Any valid YouTube URL starting with youtu.be or youtube.com/watch will open a lightbox with the video.
<p>
<a href="//www.youtube.com/watch?v=guRgefesPXE">
<img src="//i.wayne.edu/youtube/guRgefesPXE" alt="Description of YouTube video">
</a>
</p>
Responsive Embed
To make sure embedded content maintains its aspect ratio as the width of the screen changes, wrap the iframe, object, embed, or video in a container with the .responsive-embed class.
<div class="responsive-embed">
<iframe width="420" height="315" src="//www.youtube.com/embed/guRgefesPXE" title="Responsive embed example" allowfullscreen></iframe>
</div>
Figure
<figure>
<img src="/styleguide/image/400x300" alt="">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
</figure>
More options