Content area

Two column layout

Numquam ab doloribus facilis repudiandae. Sequi et odio non inventore adipisci totam quia exercitationem. Voluptate eaque est iure.

Enim sit vero et. Et explicabo excepturi et. Voluptate quidem consectetur iste ab. Est exercitationem incidunt sequi suscipit maxime est. Ullam sapiente rerum asperiores ut.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Similique temporibus voluptatem quia magni est magni et ut. Et voluptas unde possimus et veniam et quos. Ut rerum doloremque doloremque quia dolorem aut impedit. Aut explicabo magni necessitatibus qui.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Mollitia est doloribus iste repellendus qui. Voluptates qui modi non porro fugit quibusdam earum. In sed nisi ducimus.</p>
    </div>
</div>

Three column layout

Quam deserunt nihil aut quo ea in. Exercitationem sunt commodi quia aut natus aperiam. Omnis eum consectetur voluptates vero enim consequatur vitae. Facere cum qui nesciunt pariatur aperiam ratione. Et atque rerum id corporis.

Dolorem non necessitatibus cum modi rem quae. Repellat sapiente quos neque quas eos. Est laudantium officia repellendus pariatur facilis deserunt alias. Vero ut ipsam distinctio accusantium maiores.

Assumenda non labore laudantium dolores ducimus corporis vero. Quas minima ut sunt quos et velit inventore. Quaerat harum aut delectus voluptatem. Eum consequatur natus eum dolorem quidem aliquid sunt.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Et omnis molestiae non ut suscipit minima iure veniam. Tempore ut magni nam vel quis veritatis quaerat. Enim et nihil pariatur a cum quo.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Sit at magnam iste nemo non at laboriosam cum. Et esse pariatur sint animi. Temporibus non nesciunt voluptatum. Ullam temporibus excepturi quaerat quia.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Molestias id doloremque ipsam aut quis rerum est. Ut nihil reprehenderit quia atque sit ducimus quaerat. Sunt delectus nulla commodi ullam quasi architecto. Ab officia neque ratione distinctio.</p>
    </div>
</div>

Table

Example table with fake contact information
First name	Last name	Email
Sally	Windler	wfriesen@gmail.com
Fred	Rolfson	celia.maggio@gmail.com
Reba	Raynor	wisozk.dedrick@gmail.com
Adriana	Kovacek	uzboncak@johnson.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

“Voluptas nesciunt fuga veritatis eum quidem dignissimos distinctio a. Eius quia et praesentium. Numquam sequi quo iste ullam. Enim vitae vitae assumenda qui ut iusto autem saepe. Et consequuntur qui est soluta praesentium autem. Quos praesentium aliquam qui ab porro excepturi. Cum earum laborum et atque voluptatibus saepe tempore illo. Est distinctio repellat amet aut. Nihil eaque earum cum atque. Qui consequatur dolor voluptas cupiditate quam et.”

“Excepturi ullam quia culpa sed in necessitatibus voluptates. Repellendus omnis ipsa ullam nulla sunt incidunt. Dicta commodi reprehenderit ut eos error.”
— Prof. Celine Sanford Jr.

        
<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: Voluptatem consequuntur nihil quia qui.

H2: In illo mollitia dicta eligendi alias consequatur deleniti.

H3: Quisquam et aliquam et nihil earum ipsam ducimus.

H4: Nihil recusandae corrupti labore temporibus.

H5: Blanditiis et vero eos at recusandae.

H6: Nam minima earum sit et nisi.

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