Content area

Two column layout

Nam numquam placeat quis earum nostrum earum culpa. Exercitationem quia dolore vero aut. Officiis velit eum asperiores et earum qui. Ipsam eum quo quam quibusdam.

Neque fugit est eos. Debitis temporibus perferendis deserunt qui eligendi autem illum. Facilis eos voluptas iure quis. Consequatur quod nihil vel perferendis tempora. Id esse est necessitatibus voluptatibus eos et.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Qui nemo sed necessitatibus architecto quis consectetur. Ipsam ut pariatur minus quam. Ratione accusantium provident quis incidunt eius sit. Molestiae porro qui est omnis ut dolorem quibusdam placeat.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Quas est est laborum nobis aliquid. Qui omnis quis neque et omnis quidem. Doloremque expedita animi rem optio aliquam similique odio.</p>
    </div>
</div>

Three column layout

Et nam voluptates ullam libero. Consequatur fugit omnis omnis repellendus iusto. Rerum ex ipsa blanditiis deserunt reprehenderit eos ad. Consequatur illum totam consequuntur adipisci aliquam.

Beatae corporis eos dolore consequatur. In ullam voluptatem ut et. Ducimus architecto incidunt pariatur eos. Debitis vitae exercitationem enim qui.

Qui dignissimos enim quia dignissimos quia consectetur ea. Tempora tempora repellat sint et ab.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Libero culpa quis et beatae. Qui temporibus reiciendis at non et. Et odio sint eos et animi perspiciatis quo. Animi aut debitis culpa placeat error. Beatae rerum ullam ab non eos ut quaerat et.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Ut earum est ipsam eum. Non similique ut corrupti voluptatem eum dolores. Omnis possimus dolorum eligendi nihil nihil.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Quia laborum sit soluta molestiae. Quaerat placeat voluptas eum delectus et ipsam. Consectetur nobis recusandae eos ut praesentium. Voluptatem quo natus provident error id. Temporibus in nihil est optio maiores iste deleniti.</p>
    </div>
</div>

Table

Example table with fake contact information
First name	Last name	Email
Eddie	Effertz	wolff.maryam@yahoo.com
Lulu	Gorczany	beryl74@lockman.info
Amy	Ortiz	marvin.tyrel@yahoo.com
Margarett	Raynor	xokon@gmail.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

“Deserunt est amet qui incidunt. At sed non magnam. Soluta et neque sunt. Quia fugiat asperiores consequatur. Consequatur explicabo sed consectetur quo. Veniam ea veniam culpa est architecto. Voluptas sapiente exercitationem sit aut harum ut voluptatem. Fugiat numquam rerum quidem quaerat et ut animi.”

“Nihil esse rerum est suscipit. Ut itaque qui fuga quo voluptas totam nisi. Deserunt autem modi alias reiciendis et culpa. Officia eius accusamus exercitationem non perspiciatis. Ipsa necessitatibus ex pariatur aut illum explicabo voluptatem est.”
— Octavia Herzog

        
<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: Officia sit et nihil deleniti.

H2: Numquam natus porro assumenda et dolores vel ea.

H3: Sint consequatur esse odit neque optio est.

H4: Aut doloribus minus sed quos quaerat non.

H5: Eius incidunt in inventore quibusdam quia placeat.

H6: Dolorem velit vitae repudiandae.

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