---

Two column layout

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Itaque officiis autem aut tenetur quasi eos. Impedit iure illo error necessitatibus. Odit rerum dolore exercitationem voluptatem atque.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Modi quod commodi similique amet. Magni possimus quos dicta mollitia occaecati similique sed. Inventore dolores voluptatum sequi consectetur delectus at quod. Autem sequi recusandae quis distinctio a ut.</p>
    </div>
</div>
        

---

Three column layout

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>At autem labore facere. Ratione optio eos mollitia ut dolor. Sunt aliquam rerum qui repellendus est.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Sit aut ab alias quia unde. Et nihil sint molestiae dolorum consequatur fugit nihil ad. Harum adipisci sit aut facilis iusto.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Et voluptas repudiandae ducimus sequi vero velit non tempore. Est pariatur accusantium iste porro quaerat placeat voluptatem. Ex laborum ad nulla corporis. Occaecati mollitia excepturi id non et.</p>
    </div>
</div>
        

---

Table

Example table with fake contact information

Image	First name	Last name	Email
	Antone	Stanton	ralph74@nader.biz
	Alanis	Toy	ylittel@hotmail.com
	Austen	Cartwright	ashton.daugherty@bergstrom.com
	Newton	Gorczany	oschmidt@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

Et qui error praesentium eum ut consequatur dolore. Rerum accusamus asperiores temporibus. Dolore officiis fugiat sit aliquid similique facilis fugit ullam. Iste aut occaecati sint autem similique. Architecto aspernatur doloremque optio quis itaque magni beatae. Et pariatur id qui. Commodi eos ea quo vitae. Molestiae fugiat temporibus est dolor repellendus quasi aut quas. Quod voluptatem delectus esse non magnam. A enim ab quasi occaecati est. Doloribus numquam sit ipsa quidem nostrum hic. Vero tempore nulla deserunt unde officiis.

        
<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: Tempora nesciunt aut fuga nihil officiis perspiciatis.

H2: Consequatur tenetur blanditiis facilis ut iste nulla.

H3: Vero deleniti dignissimos aut nam a dolorem.

H4: Cum laudantium quisquam eveniet officiis omnis aut architecto.

H5: Dolor a possimus beatae architecto.

H6: Omnis perspiciatis ut quo omnis sed unde aut.

---

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