Content area

Two column layout

Et adipisci modi sint minima culpa nobis. Voluptatem sunt doloremque porro suscipit quis sunt commodi.

Ut dolores ipsa ratione illo vitae velit. Magni impedit sint blanditiis et incidunt molestias facere. Est autem numquam nisi nam voluptas.

See two column code

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Ab quae facere aut temporibus. Corporis et ut nostrum porro. Quia sint ab minus porro officia voluptas dolor sint. Dolor architecto qui a nostrum veritatis perferendis maxime. Repudiandae esse blanditiis est cupiditate.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Delectus aut voluptatum eligendi omnis similique officia vel. Repellendus a vel dolorem qui debitis eos. Et harum labore nam.</p>
    </div>
</div>

Three column layout

Voluptatum sint omnis aperiam consequuntur incidunt iusto. Occaecati molestiae sunt omnis non. Commodi similique temporibus nostrum quae. Assumenda quis dolorum sed cumque ea. Vitae enim ipsa harum accusantium.

Autem tempore consequuntur ut dignissimos consequatur. Enim repellendus culpa placeat et sit eligendi. Dolor placeat possimus repellat sit inventore aliquam.

Ad delectus laudantium sed ea possimus. Cum nesciunt pariatur illo qui ex. Eum repellat nemo cum ab perspiciatis.

See three column code

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Ipsam aut nisi molestias minus quia delectus. Ab quia illo reprehenderit id similique. Maxime officia numquam nobis delectus necessitatibus dolorem deleniti.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Impedit sunt ea illum ut vel unde. Ut natus necessitatibus ut qui numquam.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Explicabo qui aut culpa quo laboriosam quis. Et qui eos eius magni. Possimus voluptatem sequi sint sit consequuntur vel.</p>
    </div>
</div>

Table

Example table with fake contact information
First name	Last name	Email
Constance	Rodriguez	deanna30@gmail.com
Raegan	Kessler	ogoodwin@gmail.com
Zora	Sanford	alberta72@yahoo.com
Lonie	Kuhic	deven24@smith.org

See table code

        
<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

Dolorem nihil qui quas blanditiis distinctio. Voluptatem praesentium cumque maxime consectetur assumenda deserunt et consectetur. Est in magnam consequatur exercitationem voluptatem ut tempora. Et vitae voluptatem aspernatur et esse dolor sapiente. Qui repellendus corrupti est pariatur doloribus et optio odio. Corrupti quia provident qui aspernatur corrupti. Illum laboriosam ut temporibus et atque. Debitis libero iure repudiandae corrupti rerum est. Fugiat dolor rerum et autem corrupti illo deserunt aperiam. Porro veritatis doloremque velit porro est. Ut non quia qui nostrum non. Mollitia quae nemo unde. Rerum aut quo et tempora.

See blockquote code

        
<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</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
See button code

        
<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: Repellat iure ut voluptatibus nihil.

H2: Quo sed et dolor et aperiam et qui ullam.

H3: Laudantium sit nisi laborum fugiat animi.

H4: Aspernatur autem exercitationem voluptates at ut recusandae possimus.

H5: Natus nemo qui consequatur dolorem.

H6: Iure rerum rerum vitae voluptatem quia corrupti ut.

Media

Any valid YouTube URL starting with youtu.be or youtube.com/watch will open a lightbox with the video.

See media code

        
<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.

See responsive embed code

        
<div class="responsive-embed">
    <iframe width="420" height="315" src="//www.youtube.com/embed/guRgefesPXE" title="Responsive embed example" allowfullscreen></iframe>
</div>

Figure

Deserunt ea repudiandae reprehenderit iusto ut quia quam.

See code More options

                
<figure>
    <img src="/styleguide/image/400x300" alt="">
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
</figure>

Colors

Green

Lightest

Lighter

Light

Base

Dark

Darker

Darkest

Yellow

Lightest

Lighter

Light

Base

Dark

Darker

Darkest

Grey

White

Lightest

Lighter

Light

Base

Dark

Darker

Darkest

Black