---

Two column layout

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Neque voluptatem vel rerum eum voluptatibus at corporis iusto. Voluptatem ad qui dolore. Ullam voluptatem magni repudiandae odit fugiat. Quia harum alias aliquid consequuntur dignissimos minima et delectus.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Distinctio ut odio sit provident. In quae atque et quam ea autem natus. Sit voluptas nulla molestias eligendi magni accusantium. Recusandae molestiae explicabo a.</p>
    </div>
</div>
        

---

Three column layout

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Ut qui consectetur iusto enim rem sit. Autem quo reiciendis debitis dolorem distinctio quidem qui. Numquam officia consequatur est eos et magni sit. Repudiandae qui ipsam ad dignissimos.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Sequi quibusdam minima sed quis ut rerum perspiciatis aliquid. Qui quia nam itaque. Beatae porro ut id ut sunt quidem.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Ut non nobis ipsam pariatur omnis consectetur quas. Tempore omnis modi consequuntur quo explicabo. Dolore est tenetur saepe quos possimus.</p>
    </div>
</div>
        

---

Table

Example table with fake contact information

Image	First name	Last name	Email
	Candida	Hand	weimann.precious@yahoo.com
	Arturo	Kuvalis	asa28@schimmel.com
	Kelton	Parisian	lkshlerin@yahoo.com
	Kayli	Hyatt	shanie34@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

Ratione est neque nisi tempora. Consequatur dolor omnis rerum voluptate iusto ut laborum sed. Est numquam mollitia nam cum. Inventore nam voluptas illum id debitis. Ullam maxime autem dignissimos maiores eligendi mollitia unde. Sunt nostrum autem molestiae sed et sed enim recusandae. Sed earum nihil explicabo sint accusamus veniam. Magnam itaque reiciendis odio quibusdam doloribus qui dicta.

        
<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: Vero mollitia reiciendis eaque libero.

H2: Tempore ut quae ut dolor velit rerum saepe incidunt.

H3: Incidunt quidem non dolorem voluptas.

H4: Voluptas sint quas ut aut dolorum ad quia.

H5: Recusandae nulla dolor in beatae.

H6: Aut unde sed et voluptas non quia.

---

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