---

Two column layout

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Perferendis odio est iure voluptate quo pariatur. Enim quibusdam et at quo. Tempore cupiditate nesciunt ut quae dolores. Qui qui voluptatem et quaerat debitis. Dolore molestiae dolorum eveniet expedita pariatur in eos voluptas.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Alias consequatur laborum et inventore. Maiores impedit eveniet dolorem labore delectus magnam consectetur quia. Non quia doloribus aliquam quas architecto et.</p>
    </div>
</div>
        

---

Three column layout

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Cum ducimus sunt incidunt. Sunt itaque magnam placeat quis. Dicta culpa quo et delectus accusamus velit ratione. Mollitia quos voluptas voluptatum facere. Omnis aut suscipit nostrum perferendis quia quo vitae.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Consequuntur soluta veritatis nam nihil dolor. Aspernatur dolores aut debitis laborum. Provident doloribus fuga eius temporibus et quae.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Porro eius error quia. Eaque vel error accusantium tempora non. Culpa omnis sed et voluptatum nostrum in provident reiciendis.</p>
    </div>
</div>
        

---

Table

Example table with fake contact information

Image	First name	Last name	Email
	Annette	Lubowitz	ybogan@daniel.com
	Margarete	Simonis	elmo25@hotmail.com
	Jamal	Gottlieb	alice35@gmail.com
	Jairo	Johns	joanie.jast@hotmail.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

---

---

Blockquote

“Ex quia asperiores voluptas iure pariatur et quis velit. Expedita dolorum perferendis deleniti. Temporibus ut pariatur sequi hic aut ipsam. Et consequatur dolore qui voluptatem. A quaerat delectus dolor magni vel ab. In qui dolorem est vel culpa et. Porro aut ut minima. Est id amet amet aperiam doloremque. Doloribus rerum esse enim qui quasi. Dolores esse odio quaerat quo ut dolorem ducimus. Quo nihil natus sit officia ab et est.”

“Magnam dolorum sint unde. Voluptatibus placeat consequatur eum impedit laborum occaecati illum tenetur. Iure laborum ea dolorem culpa. Rerum sed at temporibus est optio eos consequatur nihil.”

— Gilda Hamill

        
<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: Quas dolores autem est natus.

H2: A animi cum libero laboriosam numquam.

H3: Ex quisquam harum a ad optio.

H4: Vel modi non facilis commodi eius quas officiis.

H5: Expedita et nulla necessitatibus vero.

H6: Doloribus id quia quidem omnis id aut tempore.

---

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>
        

---

---

Colors