---

Two column layout

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Ipsa recusandae ullam assumenda natus animi harum non. Hic commodi facilis molestiae veritatis. Aut numquam quia dolores doloremque hic aperiam.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Recusandae culpa iste ratione quis sed necessitatibus. Mollitia impedit culpa maxime expedita. Temporibus et quo quae et.</p>
    </div>
</div>
        

---

Three column layout

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Laborum ab veniam fugit aut eos quia. Beatae excepturi veritatis et voluptatem. Quam aut libero explicabo deserunt ipsa rerum sit.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Ipsum repellendus hic perspiciatis molestiae eum. Enim fugit exercitationem dolor exercitationem earum consectetur. Officia quis veniam quibusdam ab.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Non ut ut aperiam laborum porro hic sit fugit. Deleniti accusamus sed et ut adipisci saepe. Ex eaque quos deleniti.</p>
    </div>
</div>
        

---

Table

Example table with fake contact information

Image	First name	Last name	Email
	Beryl	McGlynn	lbernier@yahoo.com
	Hank	Buckridge	lulu84@hotmail.com
	Elyssa	Erdman	icasper@feil.com
	Sam	Weissnat	jarod.langworth@bosco.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

“Enim ratione sit aut. Accusantium ea ea doloremque. Ratione vel animi omnis eos necessitatibus aliquid et doloribus. Molestiae expedita qui quod dolores. Nostrum aut et tempore et. Unde rem vel natus quia eos. Iusto dolorum aut et voluptatem ea cum saepe.”

“Aut nihil ut sit. Officia sapiente ut est et ut. Accusantium saepe dolore iusto quibusdam dolores cum. Nulla facere incidunt eveniet ipsa ratione voluptatibus tempora harum.”

— Jaron Predovic

        
<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: Vel odit unde eius.

H2: Animi quia reprehenderit consequatur voluptates ducimus quidem.

H3: Dignissimos ut dolores aut est ea enim.

H4: Consequatur voluptates impedit consequatur.

H5: Ratione et numquam natus laborum in ad quia illum.

H6: Odio ea suscipit consequatur et alias pariatur.

---

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