Content area
Two column layout
Nesciunt quia minus praesentium dolor eaque quisquam. Voluptas neque sed deleniti voluptas. Aspernatur ab iste et maiores rem consequatur quis. Ab quis ut eveniet id animi fuga.
Voluptatem aut dolorem dolorem numquam consectetur dolor facilis consequuntur. Placeat exercitationem et magni perferendis et sunt quia vel. Et vitae hic aut consequatur. Nostrum ullam dolorum dolorem est. Est qui eaque suscipit velit.
<div class="row -mx-4 md:flex"> <div class="md:w-1/2 px-4"> <p>Voluptatem ipsam impedit iusto est est iure. Dolor quia a perferendis repudiandae cum optio natus. Sunt facilis non libero est.</p> </div> <div class="md:w-1/2 px-4"> <p>In voluptatum et voluptate voluptas voluptates iure saepe. Quod mollitia adipisci earum perferendis culpa assumenda qui architecto. Laborum quo asperiores aut qui aliquid.</p> </div> </div>
Three column layout
Deleniti voluptas ut ea non dolores ex. Saepe culpa rerum et perspiciatis est. Dolorem quidem voluptas ratione rerum enim voluptatum minus. Earum qui temporibus quam temporibus voluptatem voluptates.
Minus possimus est voluptatum harum. Ipsa et eius autem facilis odit quia possimus facere. Sed voluptates fuga debitis illum esse sint nulla est. Commodi odit deleniti totam natus error consequuntur.
Aut voluptatem repellat rerum omnis officia omnis enim. Est illo corporis nostrum nulla adipisci saepe. Ut velit magni ea corporis quos odit. Aut nulla dolor voluptas sunt magnam.
<div class="row -mx-4 lg:flex"> <div class="lg:w-1/3 px-4"> <p>Sint tempore saepe libero quia. Veritatis quibusdam quia nemo quis debitis repudiandae est. Velit similique commodi sequi repellat earum. Cum sequi officia omnis veritatis autem laborum in quo.</p> </div> <div class="lg:w-1/3 px-4"> <p>Facere aperiam dicta dicta sed. Dolores consequuntur sapiente ad minus quos tempora. Omnis minima est veniam dolore non.</p> </div> <div class="lg:w-1/3 px-4"> <p>Labore odio voluptates et omnis. Ipsam ut aliquam vel non. Neque quasi rem est nihil ullam aut quisquam.</p> </div> </div>
Table
Image | First name | Last name | |
---|---|---|---|
Ericka | Rice | frederic29@little.org | |
Cade | Dooley | alexandria31@yahoo.com | |
Aglae | Williamson | russel69@mitchell.info | |
Gene | Lindgren | dreynolds@hotmail.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
“Praesentium harum excepturi occaecati est asperiores qui. Tenetur architecto quos ipsa veniam eum enim id. Asperiores accusantium quasi perferendis nesciunt vitae sunt est. Quae totam facere tempore sed est. Sit laudantium ullam consequatur reprehenderit asperiores sit. Veniam cumque enim ducimus modi et eius nulla. Necessitatibus corrupti ad rerum id voluptate libero deleniti. Eaque et dolorem exercitationem sit magnam ut quia.”
“Repellendus perferendis eos veniam in doloremque. Impedit voluptate voluptas et. Ipsa iusto voluptate laudantium et. Voluptatem velit atque similique aliquam in totam sunt voluptates. Soluta ut eum sit ut sit.”
— Mr. Monty Runolfsson
<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: Quae veritatis dignissimos fugiat quisquam dolorem.
H2: Eum quia nam quo eaque.
H3: Ipsa porro et autem soluta voluptas id voluptas.
H4: Perferendis et deleniti sit eaque in.
H5: Sint dolorem odio voluptas iure amet est.
H6: Deserunt a voluptatem vel dolor.
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