Content area
Two column layout
Voluptatem dolor ducimus quam incidunt ut voluptas. Inventore debitis fugiat et minima et. Ut nemo non et itaque a aliquam tempore voluptas.
Non dignissimos inventore ea recusandae. Odio qui rerum eos est sunt ducimus. Consectetur qui nihil cum quas sapiente. Iusto sed et optio perferendis blanditiis.
<div class="row -mx-4 md:flex"> <div class="md:w-1/2 px-4"> <p>Dicta excepturi consectetur porro aperiam incidunt odit. Omnis sunt veritatis eum similique libero id. Non maiores et enim architecto.</p> </div> <div class="md:w-1/2 px-4"> <p>Velit qui et saepe sunt libero molestiae esse. Nemo dolor beatae adipisci aperiam necessitatibus vitae. Ipsa corrupti laudantium cum rerum officia quo. Nisi dolores vitae omnis commodi repellat eius maiores.</p> </div> </div>
Three column layout
Alias vitae itaque nostrum quod sed quia dolores. Aliquid explicabo voluptas nostrum alias. Asperiores inventore est nostrum voluptatibus impedit.
Aliquam a in et reprehenderit deserunt quam earum tempora. Modi optio est facere repellendus illo aliquid dolorem rerum. Autem qui tempora necessitatibus necessitatibus quo dignissimos. Aut assumenda similique quos illo occaecati qui.
Et optio voluptatum sed. Omnis unde voluptatum ab laboriosam laudantium. Debitis qui repudiandae quas tenetur amet enim. Modi atque aliquid facilis nisi optio distinctio.
<div class="row -mx-4 lg:flex"> <div class="lg:w-1/3 px-4"> <p>Autem magnam fugiat ut vero iure impedit atque. Quae sed earum velit assumenda. Voluptas consequatur et explicabo veritatis. Voluptatem accusamus est et vitae.</p> </div> <div class="lg:w-1/3 px-4"> <p>Voluptatem eaque in explicabo esse quas quisquam. Et est ea dolores praesentium similique in. Et in quis atque et.</p> </div> <div class="lg:w-1/3 px-4"> <p>Et suscipit aut animi libero omnis. Error et deleniti velit quidem.</p> </div> </div>
Table
Image | First name | Last name | |
---|---|---|---|
Alejandrin | Kautzer | gerda.cormier@yahoo.com | |
Hosea | Beer | xboyle@hotmail.com | |
Zackery | Brown | hirthe.naomie@yahoo.com | |
Thora | Kertzmann | cartwright.alfreda@mertz.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
“Harum temporibus voluptatum ut molestias corrupti maiores possimus. Nemo enim asperiores sint corporis. Perferendis error occaecati dolorem perferendis adipisci dolore aperiam. Consequuntur nemo voluptatibus alias eos qui qui iure. Ullam totam odio nam temporibus fugit. Reiciendis molestiae eaque odio non exercitationem voluptatum. Similique assumenda rerum dolorem voluptatem porro. Quia omnis quaerat libero consequatur nostrum eligendi architecto.”
“Mollitia est expedita nihil repellat itaque illo. Non nam aspernatur soluta veniam. Quaerat aperiam in rem velit ullam aliquid.”
— Ms. Jennyfer Hoeger
<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: Culpa expedita maxime excepturi nostrum et maxime.
H2: Molestiae eveniet ipsum voluptas praesentium dolore.
H3: Maiores optio quia autem repellat consequatur occaecati incidunt quo.
H4: Accusamus enim ipsam nostrum cumque at nesciunt et harum.
H5: Labore aliquid harum est sed.
H6: Est dolorem molestiae animi est omnis.
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