---

Two column layout

See two column code

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Reiciendis optio quidem assumenda. Quas minima quaerat et recusandae. Qui sed enim vitae nihil porro.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Eos iste sequi non molestiae enim reprehenderit. Eos quos sequi consequuntur libero doloremque non. Eum alias similique cum quas et. Animi ipsam dolorem nobis asperiores. Sed ipsum in ducimus nam.</p>
    </div>
</div>
            
        

---

Three column layout

See three column code

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Sint quas reprehenderit nam nulla explicabo quasi. Qui voluptatum sunt voluptatem sed dicta quia qui. Repellat ut nobis voluptatem quidem amet aut nemo.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Tempore eos et similique sapiente minima. Quisquam molestias suscipit quasi ea pariatur. Sit quos ipsum quidem magnam.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Perspiciatis corrupti in quisquam commodi aut accusamus magni. Dolores sed veniam facilis dicta perferendis tempora sed nisi. Quia voluptates voluptates ipsa voluptate facilis reiciendis quis.</p>
    </div>
</div>
            
        

---

Table

Example table with fake contact information

Image	First name	Last name	Email
	Donald	Botsford	wilkinson.ruby@kunze.org
	Glenda	Howell	hlind@gmail.com
	Leonardo	Cole	halvorson.tracy@greenfelder.com
	Orie	Gibson	logan.ratke@parisian.com

See table code

        
<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

Provident pariatur modi molestias quis iure id. Qui et qui eius dolorem et commodi sint cum. Id voluptatem a corrupti vero consequuntur qui doloremque. Ex et animi repellat velit. Explicabo id impedit voluptates repellat. Tempora est vero officiis ut voluptas eveniet optio. Ea voluptatibus enim qui laudantium. Eius inventore consectetur nostrum et. Assumenda omnis quo ipsum repellendus esse. Ab officia sequi dolores quo. Asperiores fugit voluptatem nemo quidem.

See blockquote code

        
<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</blockquote>
        
        

---

Buttons

Standard button
Dark button Expanded button
See button code

        
<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: Iusto perspiciatis quia id voluptates veritatis totam omnis.

H2: Sit praesentium quaerat possimus possimus.

H3: Ratione dignissimos numquam labore sunt quo ea beatae.

H4: A id quisquam quos quis et aliquid.

H5: Odio ipsum voluptatem ut saepe laudantium est.

H6: Odit facere quidem delectus quis sint.

---

Media

Any valid YouTube URL starting with youtu.be or youtube.com/watch will open a lightbox with the video.

See media code

        
<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.

See responsive embed code

        
<div class="responsive-embed">
    <iframe width="420" height="315" src="//www.youtube.com/embed/guRgefesPXE" title="Responsive embed example" allowfullscreen></iframe>
</div>
        
        

---

---

Colors