---

Two column layout

See two column code

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Ab sed ipsam excepturi voluptas in eum laboriosam qui. Velit minima sed optio non voluptas. Voluptatem sapiente alias asperiores dolorem eos id maxime deserunt. Qui ab est et aspernatur neque ut.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Aut perspiciatis esse error. Labore recusandae mollitia quis beatae ullam ut vel. Qui minima harum eos enim ex.</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>Sunt molestiae enim neque iste sit expedita. Eveniet ab magni consequuntur necessitatibus sunt expedita quae eaque. Maxime voluptas alias rem officiis molestiae officiis.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Quam non facilis ipsam et incidunt est voluptas. Quia et facilis quis similique eligendi aut. Quod accusamus ullam est quasi repellat officiis provident. Error enim dolor consectetur qui necessitatibus quia.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Inventore perferendis error ad vero. Voluptatem magnam error nulla perspiciatis nisi officiis. Dicta accusantium facilis ea consequuntur.</p>
    </div>
</div>
            
        

---

Table

Example table with fake contact information

Image	First name	Last name	Email
	Damian	Nikolaus	kmitchell@breitenberg.com
	Ally	Rempel	eve66@yahoo.com
	Lupe	Brown	gutkowski.vidal@medhurst.com
	Cleora	Hettinger	reginald.kirlin@fritsch.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

Modi architecto qui aspernatur officia officia. Quasi necessitatibus nesciunt ducimus. Eum corrupti accusamus omnis quo esse et. Non est ea velit reprehenderit est. Eveniet est consequatur aut molestias. Placeat ea exercitationem et vero consequatur doloremque porro. Necessitatibus id assumenda natus repellat aliquam omnis.

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: Officia quis iure corporis cum.

H2: Eligendi earum sequi consectetur eos ab repudiandae sed ea.

H3: Alias est dignissimos repellendus et quidem dolor.

H4: Corrupti illum quasi laboriosam et adipisci.

H5: Doloribus sit iusto aut velit doloremque.

H6: Minus vero vel quo voluptatem fugiat quia in.

---

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