Content area
Two column layout
Quos veniam expedita itaque sed illo ipsum. Explicabo nemo est iste cum repudiandae. Similique omnis id perspiciatis vitae quidem et facere. Perferendis vitae ipsum neque sapiente.
Accusamus impedit architecto similique quaerat quia. Voluptatem quaerat magni vitae eligendi nisi. Libero non iusto eos odio nesciunt. Dolorum laudantium minima tenetur.
<div class="row -mx-4 md:flex"> <div class="md:w-1/2 px-4"> <p>Quod veritatis exercitationem a. Excepturi autem magni est eos asperiores. Voluptatum nulla tenetur temporibus cumque repellat fuga.</p> </div> <div class="md:w-1/2 px-4"> <p>Consectetur architecto sint consequatur. Ut aut qui vel nostrum. Repellat vel accusamus est laboriosam ipsam. Voluptas neque et eos explicabo delectus vel voluptatem dolores.</p> </div> </div>
Three column layout
Dolor est quasi voluptas voluptate. Porro culpa reiciendis dolores qui facilis vero rerum libero.
Voluptas rerum fuga et tempore sit ipsam. Ut iusto tenetur suscipit eos doloremque beatae. Sit soluta accusantium culpa magni et.
Minus dolorem vel fugit necessitatibus distinctio. Et ex perferendis labore dolor et. Ut natus sed corporis pariatur sunt. Minus ullam eos sed vitae aut quo beatae.
<div class="row -mx-4 lg:flex"> <div class="lg:w-1/3 px-4"> <p>Eligendi dolorem magnam eum necessitatibus. Minus facere fuga neque provident consequatur quia dolores.</p> </div> <div class="lg:w-1/3 px-4"> <p>Cumque rem harum et ut. Voluptate et rerum qui aut et repellendus nulla quod. Consequatur voluptatem qui similique voluptatem.</p> </div> <div class="lg:w-1/3 px-4"> <p>Non omnis pariatur assumenda ab corporis alias. Deleniti sit voluptas earum beatae. Dolor cupiditate reprehenderit aut molestiae quas.</p> </div> </div>
Table
Image | First name | Last name | |
---|---|---|---|
Obie | Ledner | wilbert.cummings@jaskolski.com | |
Germaine | Sauer | marcelo.blanda@yahoo.com | |
Suzanne | Bradtke | prosacco.sienna@hotmail.com | |
Rory | Lebsack | bergnaum.maribel@nader.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
“Facilis consequuntur est eum ducimus cum consequatur officia. Ea quia voluptatem doloribus et amet molestiae. Quisquam esse quibusdam nemo illum sed suscipit et commodi. Voluptate nemo voluptatum autem minus consequatur similique rerum. Omnis est qui ex alias et sed rerum. Quidem quam ducimus voluptatem alias veritatis. Eveniet magnam sint quibusdam magni cupiditate et excepturi sunt. Necessitatibus necessitatibus eum ut ab enim. Officia est qui perspiciatis ipsum quos magnam molestiae et.”
“Vel aliquid aspernatur quas voluptatum enim animi dolor. Cupiditate illum voluptate reprehenderit qui quisquam est occaecati. Quo reiciendis voluptatum saepe consequatur aperiam explicabo hic ducimus.”
— Moses Kuphal
<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: Consectetur quaerat aut vel iusto et ea optio.
H2: Illum alias et ipsa vel dignissimos laborum ab.
H3: Voluptatum eius iusto ex quisquam.
H4: Magnam dolorem nostrum amet error.
H5: Ullam eos reiciendis quas quia excepturi deserunt magni.
H6: Ullam dolor enim fuga impedit eos voluptatem amet.
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