---

Two column layout

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Dolore aliquid quia fugiat explicabo aut. Sit voluptate et est et esse eius nulla. Molestiae nemo doloribus animi voluptatem in.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Voluptatem veritatis culpa nam quasi. Voluptatibus et quia corporis exercitationem soluta dolor. A nobis beatae consequatur rem.</p>
    </div>
</div>
        

---

Three column layout

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Vel voluptatem debitis excepturi numquam et culpa. Ea unde reprehenderit dolor a et sed quos beatae. Numquam expedita iusto sed molestiae quia ea. Aut qui ipsum dolores rerum. Sint sed non voluptatem sed ad fugiat doloribus.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Deleniti omnis repellendus temporibus nesciunt ea. Facere atque corrupti voluptate quo occaecati officia. Omnis quibusdam officiis consequatur voluptas illum nulla doloribus. Ut in quas ratione saepe amet odit. Eligendi rem velit doloribus quisquam in autem rem mollitia.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Error placeat rerum voluptatum eum aut similique in. Sunt et molestiae necessitatibus. Laboriosam eius saepe eum odit explicabo eaque. Numquam temporibus accusamus dolorum.</p>
    </div>
</div>
        

---

Table

Example table with fake contact information

Image	First name	Last name	Email
	Kelley	Satterfield	ztremblay@hotmail.com
	April	Johns	daniel.betty@mante.com
	Irving	Boyle	jhintz@gmail.com
	Rachael	Steuber	aidan.hudson@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

“Id tempora hic non et molestiae tempora dignissimos. Veritatis deleniti repellendus laudantium iure amet. Vitae laboriosam aut voluptas accusantium rerum quisquam tempore. Saepe dolor qui aut doloribus eligendi qui. Sequi ex enim natus eligendi ipsam. Unde fuga tenetur qui porro nihil quia perspiciatis. Sed quis earum magnam quo aspernatur perferendis. Placeat est est fugit voluptates expedita. Quibusdam incidunt dicta voluptatem velit eum aut. Voluptatibus velit dolorem iusto consequatur est animi. In velit vel et neque facilis aperiam. Qui architecto aut dolor error. Reiciendis esse explicabo nihil amet.”

“Molestiae aut neque tenetur qui dolorem perspiciatis. Debitis fugit sit tempora mollitia deleniti officiis corporis. Saepe voluptatem perferendis eum dolore. Dolorum inventore officia inventore vero nesciunt et ducimus facere.”

— Dessie Roberts

        
<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: Animi qui aut aliquid iure tenetur repellat sed.

H2: In aut totam quod voluptatem nobis ea.

H3: Quia illum ut quis provident et.

H4: Illo pariatur culpa nemo eligendi dolores.

H5: Aliquam doloremque incidunt odit unde voluptas.

H6: Labore ratione et inventore quo id.

---

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