---

Two column layout

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Harum maxime at et et aliquid. Et laborum repellendus nihil harum. Asperiores nisi hic dolores similique quas voluptatem. Sit aperiam deserunt ullam earum incidunt rerum.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Qui earum non sit asperiores. Quia hic a fugiat quisquam. Non totam dolores qui amet pariatur.</p>
    </div>
</div>
        

---

Three column layout

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Aperiam aut cumque quisquam sint sequi. Consequuntur atque velit ex rerum sit laboriosam odit. Possimus autem aliquid est impedit in numquam.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Culpa quae aut nesciunt quod ex. Saepe veritatis sed eius deserunt id soluta. Molestiae vero et molestiae est. Voluptatem non perspiciatis exercitationem.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Illo beatae ab nemo voluptates. Error aperiam quo ratione ipsam. Tenetur facere pariatur blanditiis voluptate.</p>
    </div>
</div>
        

---

Table

Example table with fake contact information

Image	First name	Last name	Email
	Leslie	Robel	tommie44@sipes.org
	Haylie	Kessler	mayer.janelle@yahoo.com
	Juliana	Hammes	zieme.sanford@vandervort.com
	Jovani	Shanahan	nkunze@romaguera.info

        
<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

“Et hic consectetur fugiat facere eos ipsam dolorem. Qui pariatur voluptatem et harum nostrum. Maxime quia ea nisi ut necessitatibus quam et. Harum ut reprehenderit reprehenderit. Exercitationem architecto odit recusandae sit exercitationem eos. Voluptatem saepe repellendus consequatur qui. Nemo illum reprehenderit ex commodi nisi. Sunt ipsam voluptas minus sed adipisci corporis.”

“Perspiciatis eligendi debitis aliquid omnis sint excepturi sunt. Ut aspernatur laborum velit eos esse. Laborum sapiente fuga autem quia quisquam. Et iure voluptatem esse vel adipisci.”

— Prof. Cynthia Borer V

        
<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: Ut sint cum qui quo perferendis.

H2: Est expedita porro autem voluptas aut et dolore.

H3: Esse occaecati eveniet nemo voluptatibus.

H4: Qui ad repellat facere impedit maxime accusantium officia.

H5: Omnis in omnis quisquam dolor omnis sit aspernatur.

H6: Rerum qui dolorem aliquam enim.

---

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