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

Example table with fake contact information
First name	Last name	Email
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 button
Dark 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

Colors

Lightest green

Lighter green

Light green

Base green

Dark green

Darker green

Darkest green

Lightest yellow

Lighter yellow

Light yellow

Base yellow

Dark yellow

Darker yellow

Darkest yellow

White

Lightest grey

Lighter grey

Light grey

Base grey

Dark grey

Darker grey

Darkest grey

Black