---

Two column layout

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Non dolor modi ab illum quasi. Aut ut odit assumenda praesentium. Neque blanditiis aliquid sit sit.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Blanditiis rerum natus nisi eius ea consequuntur aspernatur ea. Quo tempore enim a. Rerum in doloribus quo aut quo. Illo quo dolorem qui expedita quia et.</p>
    </div>
</div>
        

---

Three column layout

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Nobis unde qui quasi accusamus accusantium necessitatibus iste. Aut sequi corporis autem voluptatem molestiae voluptas. Aut culpa quidem id debitis. Amet ea magni ab laudantium provident asperiores labore.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Accusantium quas ratione dolorem iure odio iure. Vitae quos nulla temporibus eveniet omnis eius architecto. Rerum vel qui voluptatem dignissimos. Consequatur pariatur aut enim et molestiae aut sint.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Aliquid repudiandae ipsum omnis et aut molestiae delectus. Maiores sed molestiae modi vel dolore. Et beatae voluptas dolorem saepe quibusdam est. Velit iusto error quaerat sit voluptatibus.</p>
    </div>
</div>
        

---

Table

Example table with fake contact information

Image	First name	Last name	Email
	Leonardo	Terry	chelsea.howell@jacobi.com
	Domenick	Durgan	zprosacco@hotmail.com
	Margaretta	Dickens	hmurazik@dicki.com
	Gerda	Jacobson	streutel@gmail.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

“Labore amet deleniti enim beatae enim sunt. Ipsam quidem quia veritatis ut est quia. Eos ut quod distinctio minus. Alias inventore doloremque quisquam pariatur natus quia quaerat. Sed ipsum porro libero est aut laborum. Quis voluptatem aspernatur laborum nulla nam. Et sint occaecati rerum corrupti. Id veniam eveniet consectetur est et. Quidem non voluptatem eligendi possimus esse laudantium laboriosam. Corporis ipsum iusto voluptatem tenetur numquam tempora. Eveniet tempora impedit quasi nostrum dolor eos voluptates. Nesciunt quo delectus tempora molestiae voluptas sit.”

“Vero modi dicta qui a nam. Saepe id voluptatem dignissimos cumque sunt amet ex. Quia consectetur officia est rem.”

— Velva Bailey

        
<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: Rem praesentium earum consequatur reiciendis.

H2: Laboriosam est enim et dolorem temporibus.

H3: Minus dignissimos qui architecto dolore.

H4: Id qui consequatur aut earum.

H5: Quas ad tenetur culpa reprehenderit.

H6: Dolorem nisi voluptatibus quia omnis.

---

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