---

Two column layout

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Voluptatem alias ea voluptas ab cum sunt ad rerum. Quidem officia possimus provident voluptas accusamus. Natus eligendi et voluptatem quae. Maxime error quam eveniet explicabo quis.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Dolores iure voluptates reiciendis et minima totam dolore. Et animi soluta totam itaque voluptatibus nihil.</p>
    </div>
</div>
        

---

Three column layout

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Est quis repellat sed tempora. Consectetur commodi architecto dolorem corporis rerum blanditiis. Sit veritatis natus adipisci quia rerum sint voluptate debitis.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Saepe quo nulla ut eveniet facilis et. Laudantium aut placeat impedit itaque rem earum. Ut pariatur sapiente placeat consequatur molestias officiis facilis.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Neque sit ea esse. Accusantium ratione quam eum voluptas delectus iure qui dicta. Consectetur quia atque laboriosam eum.</p>
    </div>
</div>
        

---

Table

Example table with fake contact information

Image	First name	Last name	Email
	Sabryna	Towne	gshanahan@yahoo.com
	Shaun	Pacocha	owhite@conroy.net
	Alvena	Olson	lherman@koch.net
	Magnus	Erdman	qwitting@hotmail.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

Quasi omnis et vel natus eos. Tempora eos non expedita dignissimos optio. Et officia id neque. Dolorem qui quas quidem voluptatibus cumque aliquam omnis. Dolorum quaerat dignissimos sit quidem. Nam et id accusamus id quia nostrum. Non sit harum nesciunt repellat. Nihil quia commodi omnis reprehenderit repudiandae. Iure possimus earum culpa iure dolor veritatis sed. Nemo ex culpa autem voluptas consequatur corrupti. Praesentium voluptas laborum dolor dolores.

        
<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</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: Aliquid fuga voluptas aut quaerat.

H2: Temporibus sint quod occaecati voluptatem in.

H3: Officia omnis natus id omnis omnis autem et.

H4: Voluptate eum et aspernatur.

H5: Fugit est molestiae explicabo eos rem commodi id.

H6: Ut sed et commodi nostrum.

---

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