---

Two column layout

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Dicta excepturi consectetur porro aperiam incidunt odit. Omnis sunt veritatis eum similique libero id. Non maiores et enim architecto.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Velit qui et saepe sunt libero molestiae esse. Nemo dolor beatae adipisci aperiam necessitatibus vitae. Ipsa corrupti laudantium cum rerum officia quo. Nisi dolores vitae omnis commodi repellat eius maiores.</p>
    </div>
</div>
        

---

Three column layout

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Autem magnam fugiat ut vero iure impedit atque. Quae sed earum velit assumenda. Voluptas consequatur et explicabo veritatis. Voluptatem accusamus est et vitae.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Voluptatem eaque in explicabo esse quas quisquam. Et est ea dolores praesentium similique in. Et in quis atque et.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Et suscipit aut animi libero omnis. Error et deleniti velit quidem.</p>
    </div>
</div>
        

---

Table

Example table with fake contact information

Image	First name	Last name	Email
	Alejandrin	Kautzer	gerda.cormier@yahoo.com
	Hosea	Beer	xboyle@hotmail.com
	Zackery	Brown	hirthe.naomie@yahoo.com
	Thora	Kertzmann	cartwright.alfreda@mertz.biz

        
<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

“Harum temporibus voluptatum ut molestias corrupti maiores possimus. Nemo enim asperiores sint corporis. Perferendis error occaecati dolorem perferendis adipisci dolore aperiam. Consequuntur nemo voluptatibus alias eos qui qui iure. Ullam totam odio nam temporibus fugit. Reiciendis molestiae eaque odio non exercitationem voluptatum. Similique assumenda rerum dolorem voluptatem porro. Quia omnis quaerat libero consequatur nostrum eligendi architecto.”

“Mollitia est expedita nihil repellat itaque illo. Non nam aspernatur soluta veniam. Quaerat aperiam in rem velit ullam aliquid.”

— Ms. Jennyfer Hoeger

        
<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: Culpa expedita maxime excepturi nostrum et maxime.

H2: Molestiae eveniet ipsum voluptas praesentium dolore.

H3: Maiores optio quia autem repellat consequatur occaecati incidunt quo.

H4: Accusamus enim ipsam nostrum cumque at nesciunt et harum.

H5: Labore aliquid harum est sed.

H6: Est dolorem molestiae animi est 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