Content area

Two column layout

Voluptatem consequatur voluptatibus ut voluptatem. Tempore sint voluptas eius nulla quia debitis aut. Corporis tempora sapiente quia neque et atque. Ab nihil necessitatibus non reprehenderit. Nesciunt quo qui aut et omnis.

Sunt sit explicabo sed recusandae qui quas. Architecto est ratione veniam illo sapiente vel aut. Perspiciatis beatae nostrum sit nam ad consequatur eveniet. Error laboriosam necessitatibus corrupti sunt natus aliquid.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Voluptatem cupiditate accusantium deleniti laudantium aliquam eum. Sed ducimus reiciendis quaerat commodi nostrum praesentium nostrum. Architecto ex architecto doloribus in vitae ut.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Perferendis sequi aspernatur quia rerum. Perferendis atque accusantium aliquam. Quo harum tempore exercitationem. Ut voluptatem molestias et repudiandae et eveniet laboriosam.</p>
    </div>
</div>

Three column layout

Quis accusamus possimus id. Sit odit dolores explicabo eum voluptas. Quia aut voluptas et. Sed molestias soluta consequatur veritatis ipsa dolorem.

Et quod et beatae suscipit et. Beatae deserunt in quidem commodi adipisci id. Atque repudiandae vitae deserunt quod. A enim amet nemo qui placeat.

Nobis ratione ipsa repellat veritatis. Et nostrum omnis possimus ut provident tempore. Dolore repellat voluptas dolores impedit omnis. Recusandae aut accusamus quo ut. Voluptate quidem a maxime voluptatibus quo dolorem aut.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Nobis ipsam molestiae animi voluptas qui nihil ullam. Unde voluptate error assumenda veritatis. Qui ex consequatur dolores repellat rerum voluptatem.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Totam sequi dicta nemo repudiandae expedita. Molestias molestias consequatur deserunt error autem nesciunt. Nesciunt nostrum nostrum est omnis dolore. Non rerum in quasi nobis laborum in.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Nulla voluptatem et debitis aut. Saepe corporis debitis animi. Reiciendis officiis quo odio incidunt eos.</p>
    </div>
</div>

Table

Example table with fake contact information
First name	Last name	Email
Lilyan	Fahey	maribel.sporer@hotmail.com
Daisy	Watsica	dannie.hayes@gmail.com
Corrine	Jakubowski	gmohr@gmail.com
Easton	Nicolas	angie94@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

“Molestiae fuga nobis ducimus et facere. Distinctio ratione eos excepturi. Recusandae possimus magnam aliquam voluptatem veniam laboriosam iure. Rerum perferendis velit mollitia vel provident eveniet. Possimus sapiente labore soluta occaecati. Eos animi iure quisquam in. Deserunt et est doloribus ea praesentium sapiente illo. Doloribus cumque qui est qui ea error. Voluptatem et tempore molestiae tempora neque.”

“Omnis tenetur est laboriosam architecto dolorem perspiciatis. Maxime corporis quam similique sunt. Nam dolorem repellat cupiditate nesciunt dolor. Impedit tenetur possimus dolorem quas ut accusantium. Quidem neque nisi iste aspernatur deleniti est odio dolore.”
— Kassandra Schamberger

        
<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: Et sit expedita eum recusandae.

H2: Labore maxime voluptatibus aspernatur quo assumenda delectus quia.

H3: Nisi tenetur impedit rem a.

H4: Non voluptatem maiores voluptas mollitia sit illum asperiores.

H5: Sit dolorem facilis quae ratione consequatur eum doloribus.

H6: Ea dolor sit illum.

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