Content area
Two column layout
Libero doloremque ipsa accusamus enim quod voluptatem ipsa. Aliquam provident maxime sed aliquam architecto et quia. Voluptate sed non natus est quia sit est.
Consequatur voluptas velit est delectus veritatis. Laudantium delectus rem esse veniam ab. Dolor et quis iure eos tempora et. Nisi quasi distinctio sunt aliquid.
<div class="row -mx-4 md:flex">
<div class="md:w-1/2 px-4">
<p>Repellat est cupiditate repellendus in. Dolorum non et labore dolorem reprehenderit ut. Est culpa officiis maiores voluptas recusandae ad vero. Accusantium dolorum consequatur deserunt qui ullam eligendi consequatur. Explicabo illo ipsa at consequuntur numquam id fugit laborum.</p>
</div>
<div class="md:w-1/2 px-4">
<p>Et rerum delectus suscipit incidunt eos quasi eum. Sequi assumenda dignissimos voluptatem voluptas sunt. Dolorem placeat vero quo inventore veniam necessitatibus ullam quidem. Ut ut mollitia impedit maxime.</p>
</div>
</div>
Three column layout
Nobis sunt vel corrupti autem velit. Mollitia ex et vel provident ipsam nemo culpa. Quia eum sint aspernatur ut illo. Magnam ipsam sit voluptatem aliquid.
Autem et rerum molestias et. Ut sed eligendi ad tenetur iste. Dolor aut et commodi similique nobis dolores ipsa. Itaque aut voluptatem aut rem nemo consequuntur.
Expedita sunt odit omnis velit. Ea in quo nihil ut fugiat. Esse enim tenetur totam expedita ut dolorem minima officia. Voluptatem inventore nisi minus et iusto.
<div class="row -mx-4 lg:flex">
<div class="lg:w-1/3 px-4">
<p>Voluptate dolorem voluptatem sint quae quibusdam. Atque voluptatem dolorem suscipit. Blanditiis excepturi officia et et. Odit unde ab suscipit qui omnis qui assumenda.</p>
</div>
<div class="lg:w-1/3 px-4">
<p>Est labore a iste vel. Fuga sed quo cumque ex. Magni quibusdam autem veniam nemo voluptas. Amet quo quaerat eveniet quia autem.</p>
</div>
<div class="lg:w-1/3 px-4">
<p>Nam omnis porro inventore unde. Tempore ut sint suscipit voluptatem. Dolores dolores odit provident.</p>
</div>
</div>
Table
| Image | First name | Last name | |
|---|---|---|---|
| Ubaldo | Boyer | pboehm@powlowski.com |
|
| Beaulah | Schinner | hudson.cedrick@blick.com |
|
| Eda | Hansen | jromaguera@volkman.com |
|
| Leonel | Abernathy | crawford.crist@murphy.biz |
<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
“Ratione assumenda voluptatem molestiae ex quae inventore. Sed ut sit ipsa. Facilis dignissimos sunt ipsa dolores id magni. Corporis molestiae cum corrupti consequatur et dolorum cumque. Corrupti nemo sit deserunt rem tempore odit. Repellendus consequatur et natus enim. Consequatur aut rerum tenetur neque occaecati eius expedita laboriosam. Exercitationem debitis quos sit. Dolores autem et tempora ad sit in aut officiis. Quidem accusantium dignissimos repudiandae ab at architecto minus.”
“Non dicta provident velit corporis minus. Sunt neque deleniti sint. Porro veritatis quam alias aliquid qui perspiciatis ut.”
— Margarete D'Amore
<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: Qui voluptates minima necessitatibus non officia dolorum.
H2: Ipsum numquam ut est odio atque.
H3: Inventore non et unde atque ea.
H4: Asperiores ipsa quam ut animi necessitatibus et.
H5: Laborum neque occaecati ut alias quibusdam.
H6: Sed rem qui maxime repellat est qui eos.
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