Content area
Two column layout
Maiores quisquam eaque aut voluptatem nam placeat voluptatem quia. Voluptatem et saepe explicabo cupiditate similique est. Cumque non nulla quibusdam et beatae harum.
Sint suscipit sit vero. Id molestiae est id at.
<div class="row -mx-4 md:flex">
<div class="md:w-1/2 px-4">
<p>Est occaecati et debitis ut maiores ut omnis. Ab sapiente omnis perferendis et id cumque. Quaerat eveniet fugit molestiae excepturi.</p>
</div>
<div class="md:w-1/2 px-4">
<p>Perferendis tempore quos esse facilis consequuntur reiciendis vitae. Possimus quis blanditiis nobis voluptatem adipisci. Natus rem molestiae dolor necessitatibus aut odit.</p>
</div>
</div>
Three column layout
Quia quidem sunt sunt minus architecto ea fugiat. Quisquam corporis ex sed illum eum modi corporis. Ut esse libero et sit cupiditate. Non dolor quibusdam occaecati unde dolor id fugit.
Ducimus quia aliquid laborum amet quae dolore. Ullam ad nulla ratione sed. Distinctio aut consequuntur nam magnam numquam.
Qui eaque distinctio at delectus. Et perspiciatis quae culpa beatae et est distinctio. Molestias officia vero qui in in aliquam. Tenetur sed totam amet sed similique minima.
<div class="row -mx-4 lg:flex">
<div class="lg:w-1/3 px-4">
<p>Aut unde adipisci odit ipsum. Perspiciatis ut enim corporis sit. Et quia qui earum iure.</p>
</div>
<div class="lg:w-1/3 px-4">
<p>Voluptas illum impedit aspernatur magnam ut. Ipsum aut sit delectus at. Dolores iste fugit praesentium nam consequatur et omnis molestias. Animi sed et id voluptatem dolorem voluptate incidunt nemo.</p>
</div>
<div class="lg:w-1/3 px-4">
<p>Rem necessitatibus consequatur necessitatibus cupiditate molestiae voluptatum nemo ipsam. Dolore deserunt veritatis hic perferendis. Blanditiis quasi earum molestias tempore voluptatum. Optio voluptate soluta accusantium quia fugiat porro eos.</p>
</div>
</div>
Table
| Image | First name | Last name | |
|---|---|---|---|
| Rod | Ferry | lacy40@yahoo.com |
|
| Jimmie | Zboncak | myrtle.block@hermann.net |
|
| Israel | Gibson | margie60@gmail.com |
|
| Natalia | Feil | shields.nathanial@yahoo.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
“Voluptas sed vel sit dolorum sint. Dolorem sit iusto qui dolor et ducimus aut. Officiis reprehenderit impedit ex dolores blanditiis. Voluptas ut est suscipit nostrum explicabo nihil. Soluta quae quis eum enim eum quis. Dolore deserunt voluptatem doloribus ullam. Perspiciatis quas aliquam beatae aliquam eius. Enim eius natus modi autem voluptas consequatur excepturi. Iure ipsum qui ea ex. Sint eius illum dicta. Vitae error distinctio voluptatem enim. Sed sapiente harum tempora adipisci error et. Et velit ut similique eaque illo est exercitationem.”
“Corporis nostrum et quia numquam. Veritatis animi magnam odio voluptatibus hic fugiat. Illo adipisci ut aut incidunt. Ut qui modi accusamus fugiat sit. In ut architecto doloremque accusantium qui minima suscipit.”
— Raphael Schowalter
<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: Dolorem quam nulla dolorem autem.
H2: Id et rerum et.
H3: Recusandae nisi neque vitae est.
H4: Recusandae natus ipsum architecto dignissimos et tempore.
H5: Eum fugit ea eos et tempore at sunt veritatis.
H6: Eos earum quo dolorem laudantium omnis omnis perspiciatis.
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