---

Two column layout

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Dolore non nulla et dolores porro explicabo eum. Qui omnis iure repellat non iusto. Exercitationem aut sunt inventore amet et soluta. Aliquid cupiditate fuga sequi ipsum.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>In voluptatum et aspernatur et reiciendis voluptas ipsum. Non voluptas rem et repellat et. Et aut quis ratione occaecati laborum.</p>
    </div>
</div>
        

---

Three column layout

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Placeat nulla corrupti provident sapiente et. Enim est perspiciatis illo quos aut ab expedita. Nesciunt et velit sunt ipsam perspiciatis sit non quisquam. Odit assumenda atque ut vel harum in.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Sint magnam facere totam quod. Molestiae reiciendis cum ipsum sed neque et provident. Illo similique est assumenda dolorum sint nihil et. A sunt ad laudantium voluptatem itaque voluptatum alias.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Alias consequatur illum ab molestiae vitae. Nemo laudantium sit non voluptatibus. Eum earum fugiat qui cupiditate. Explicabo quia ipsa dolorum asperiores.</p>
    </div>
</div>
        

---

Table

Example table with fake contact information

Image	First name	Last name	Email
	Autumn	Fadel	stuart.ohara@runolfsson.com
	Jerel	Turcotte	eyost@gmail.com
	Mara	Lang	cooper.krajcik@yahoo.com
	Mina	Macejkovic	callie.moore@damore.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

“Ut a cum magni sit. Voluptas quod voluptas quos non labore non est. Dignissimos debitis corrupti fugit iusto. Quasi asperiores necessitatibus omnis. Expedita voluptate dolor sunt et accusamus ut aut repellat. Labore est unde sed id sit aut in. Quae neque distinctio sapiente cumque corporis numquam. Et cupiditate et voluptatem voluptates laudantium commodi. Rerum tempora nulla voluptatem corrupti est qui. Molestiae illum est minus ut sunt. Molestiae et aliquid reiciendis rerum vel minus minus. Id natus veritatis amet quo aut illo molestiae.”

“Consequatur vero nostrum rerum praesentium accusantium. Similique officia explicabo asperiores et. Cum voluptas asperiores quam aliquid officia est. Error reprehenderit dolor aut ut cum. Soluta maiores adipisci vel debitis. Consequatur cum debitis eos sequi quisquam magni harum.”

— Prof. Kyler Denesik

        
<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: Est enim quia facilis voluptates omnis vero.

H2: Sit quia officia nobis quas molestias impedit qui.

H3: Dolorem minus quos sunt laborum similique.

H4: Molestiae animi et quis enim enim reprehenderit nesciunt.

H5: Animi velit repudiandae eos nesciunt nesciunt.

H6: Vero praesentium rerum quasi natus quibusdam.

---

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