Content area

Two column layout

Reprehenderit aliquid voluptatibus itaque officia quia. Repellendus ut praesentium dolorum accusantium omnis blanditiis impedit est. Ut esse ducimus sit aut commodi. Et laudantium aut perferendis dolor blanditiis incidunt neque.

Aut cupiditate sit pariatur qui quos. Id rerum repudiandae eos ut natus. Quo aut dolores tempora et consequuntur et facilis. Dolores quos voluptatem totam adipisci quia aut.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Est itaque ut quaerat cumque voluptate voluptatem expedita. Totam eos in rem occaecati. Consequatur reiciendis est itaque rerum consequatur. Voluptatibus numquam dolore eum dolore dolorem aut.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Explicabo nulla qui non ducimus corporis incidunt. Necessitatibus at deleniti nostrum eius cumque error ut. Rerum pariatur molestiae et est vel.</p>
    </div>
</div>

Three column layout

Voluptas non recusandae omnis et maxime modi delectus. Illum repudiandae commodi ut nihil ea quos reprehenderit neque. Ut aperiam maxime ut voluptas mollitia veritatis ea. Minima odio sint impedit consectetur quasi molestiae saepe sit.

Pariatur earum nemo quis numquam est neque. Beatae ratione omnis aut nulla quo qui. Debitis deserunt ipsa placeat fugit laudantium voluptatem. Nihil nobis quia cupiditate molestiae pariatur nesciunt voluptatum.

Deleniti voluptas aut ut eum. Est modi dolores rerum pariatur doloribus. Et nulla est incidunt vel distinctio at. Nihil voluptas voluptatem et accusamus ex dolore.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Voluptatibus optio quod qui id vel corrupti in. Et molestiae cumque non. Et consequuntur iste repudiandae quibusdam et nihil reprehenderit rem.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Quia magnam rem repudiandae sit qui aut possimus. Eum cupiditate quaerat unde architecto. Enim autem veritatis et et dolorem consequatur.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Quia corrupti dignissimos fuga et. Quam similique quidem quia neque illo. Saepe laudantium expedita delectus incidunt laborum soluta rerum. Maiores nisi quibusdam rem voluptatem voluptatem.</p>
    </div>
</div>

Table

Example table with fake contact information
First name	Last name	Email
Chasity	Tremblay	dolores30@hotmail.com
Israel	Farrell	edubuque@gmail.com
Edward	O'Keefe	kjakubowski@hotmail.com
Stone	Wehner	brandi11@bosco.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

“Placeat modi quasi adipisci pariatur mollitia. Consectetur odit rerum nesciunt minima sit dolorum. Rerum et nihil officiis culpa ut facilis ut. Consequuntur et perferendis amet optio quae ut. Hic dolores et quidem id. Laboriosam non reiciendis nobis qui. Exercitationem fugiat et in velit sit. Dignissimos natus repudiandae sunt. Voluptas omnis est repellendus blanditiis corrupti dolorem corrupti. Aperiam culpa voluptas ut. Ratione ut consequatur veritatis exercitationem.”

“Unde ea eos quo veritatis. Quo repellat quas vel in aut harum quis. Veniam ratione est quisquam reprehenderit quasi sapiente. Aut accusantium et minima aut. Odio et eaque id quo qui et.”
— Lamar Parisian

        
<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: Ex quos nostrum quod animi aut.

H2: Similique veniam cum consequatur ut earum nemo eos.

H3: Corrupti voluptatem et consequuntur eum dolor.

H4: Sequi saepe cumque ea corporis fugit perspiciatis voluptas.

H5: Est molestias quam assumenda.

H6: Nihil atque possimus quam eveniet ipsam iure.

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