---

Two column layout

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Quod veritatis exercitationem a. Excepturi autem magni est eos asperiores. Voluptatum nulla tenetur temporibus cumque repellat fuga.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Consectetur architecto sint consequatur. Ut aut qui vel nostrum. Repellat vel accusamus est laboriosam ipsam. Voluptas neque et eos explicabo delectus vel voluptatem dolores.</p>
    </div>
</div>
        

---

Three column layout

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Eligendi dolorem magnam eum necessitatibus. Minus facere fuga neque provident consequatur quia dolores.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Cumque rem harum et ut. Voluptate et rerum qui aut et repellendus nulla quod. Consequatur voluptatem qui similique voluptatem.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Non omnis pariatur assumenda ab corporis alias. Deleniti sit voluptas earum beatae. Dolor cupiditate reprehenderit aut molestiae quas.</p>
    </div>
</div>
        

---

Table

Example table with fake contact information

Image	First name	Last name	Email
	Obie	Ledner	wilbert.cummings@jaskolski.com
	Germaine	Sauer	marcelo.blanda@yahoo.com
	Suzanne	Bradtke	prosacco.sienna@hotmail.com
	Rory	Lebsack	bergnaum.maribel@nader.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

“Facilis consequuntur est eum ducimus cum consequatur officia. Ea quia voluptatem doloribus et amet molestiae. Quisquam esse quibusdam nemo illum sed suscipit et commodi. Voluptate nemo voluptatum autem minus consequatur similique rerum. Omnis est qui ex alias et sed rerum. Quidem quam ducimus voluptatem alias veritatis. Eveniet magnam sint quibusdam magni cupiditate et excepturi sunt. Necessitatibus necessitatibus eum ut ab enim. Officia est qui perspiciatis ipsum quos magnam molestiae et.”

“Vel aliquid aspernatur quas voluptatum enim animi dolor. Cupiditate illum voluptate reprehenderit qui quisquam est occaecati. Quo reiciendis voluptatum saepe consequatur aperiam explicabo hic ducimus.”

— Moses Kuphal

        
<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: Consectetur quaerat aut vel iusto et ea optio.

H2: Illum alias et ipsa vel dignissimos laborum ab.

H3: Voluptatum eius iusto ex quisquam.

H4: Magnam dolorem nostrum amet error.

H5: Ullam eos reiciendis quas quia excepturi deserunt magni.

H6: Ullam dolor enim fuga impedit eos voluptatem amet.

---

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