---

Two column layout

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Libero dolores distinctio molestiae dolorum voluptas molestiae qui. Voluptas natus dolores aut vel aspernatur. Sapiente qui quibusdam mollitia aliquid nulla quidem cum. Distinctio voluptatem praesentium dolores odit.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Sit accusamus iusto fugit pariatur. Illum odio est quis in. Delectus velit cum iste illum quod voluptates. Doloribus nesciunt sit quo placeat labore nostrum sunt explicabo.</p>
    </div>
</div>
        

---

Three column layout

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Quaerat nulla id dolor deleniti enim facilis. Quis assumenda alias ea non mollitia. Et cumque facilis voluptas cum et qui.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Tenetur dolor dolor nesciunt vitae ut facilis. Quis dolores quo provident sint aliquam sint. Illo sunt qui quo et voluptatibus quidem vel. Aut expedita sint dolores laboriosam iure quisquam.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Laborum tempore quos sit est. Saepe voluptatum aut laborum quo impedit voluptates corrupti. Ad ea et quis et ut.</p>
    </div>
</div>
        

---

Table

Example table with fake contact information

Image	First name	Last name	Email
	Tevin	Herman	ternser@cartwright.com
	Delia	Quitzon	mateo19@bayer.net
	Janick	Bergstrom	simonis.mackenzie@yahoo.com
	Halle	Corkery	adell.schuppe@yahoo.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

“Fugiat sint porro et vel totam est molestiae cumque. Praesentium qui quam ipsum error voluptatibus. Provident magni tempore odit assumenda quia reiciendis. Fugit odit cum excepturi molestiae dolor. Autem nobis asperiores harum nihil culpa inventore excepturi. Sed accusantium dicta aliquam quis aut. Sapiente aliquid itaque corrupti et. Est deleniti odio ut officiis et vel. Atque praesentium quis libero reprehenderit porro.”

“Eum veniam dolorum earum sed deserunt quaerat porro. Non sit tempore velit unde. Asperiores numquam maxime perspiciatis dolore. Voluptate qui est nesciunt iure earum eaque optio.”

— Sydnee Medhurst IV

        
<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 quia sint rerum harum asperiores consequatur quasi.

H2: Similique suscipit qui et delectus omnis voluptatem.

H3: Quis eius aperiam dolores unde tenetur rerum.

H4: Ipsa aliquam omnis autem quo laudantium repudiandae fugit.

H5: Omnis dolorem est possimus beatae voluptatem sequi omnis.

H6: Nostrum in commodi ad voluptate assumenda eos quia.

---

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