---

2 Column Example

See row/columns code

            
<div class="row -mx-4 flex">
    <div class="w-full sm:w-1/2 px-4">
        <p>Neque corporis repudiandae quis ea id. Et culpa nam inventore itaque harum. Expedita tempore necessitatibus quas sit similique iusto. Et sed id velit voluptates sed voluptates. Atque neque quia officiis dignissimos sed eligendi et.</p>
    </div>
    <div class="w-full sm:w-1/2 px-4">
        <p>Voluptatem accusantium adipisci dolores quo ullam. Iste aut voluptatem nihil sed voluptatibus occaecati qui. Voluptatibus est quaerat eum a at vero nemo. Blanditiis aut et cupiditate veritatis officiis maxime tempore.</p>
    </div>
</div>
            
        

---

Table

First Name	Last Name	Email
Damon	Turcotte	vborer@gmail.com
Hank	Beier	stephanie.borer@yahoo.com
Darrin	Corwin	stanton.dashawn@kris.com
Lyda	Bayer	qlakin@barton.com
Virgie	Runolfsdottir	towne.alize@buckridge.org
Brianne	Kirlin	aveum@reynolds.com
Lilian	Berge	brenden86@zemlak.net
Joaquin	Breitenberg	vicente.towne@gmail.com
Griffin	Keeling	sammie.schmidt@shields.net
Corbin	Ratke	joanie.beer@gmail.com

See table code

        
<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
        
        

---

Abbreviations

WSU

---

---

Blockquote

Ipsa sed vel sunt dolores itaque quis laboriosam. Nesciunt soluta similique quidem sed officia sequi. Ducimus doloribus omnis quos. Dolor sint harum nesciunt molestias. Eveniet eius dolores qui neque consequatur autem odio. Modi velit et ad. Sit amet temporibus enim quia omnis harum voluptatem. Consequatur ut vel expedita ipsa non quia earum. Deserunt qui voluptatem ipsam corporis non incidunt. Quia tempore numquam asperiores dolores placeat. Est modi ipsum libero quisquam.

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 Expanded Button See Button Code

        
<a href="#" class="button">Standard Button</a>
<a href="#" class="button expanded">Expanded Button</a>
        
        

---

Headers

H1: Dolores dolorum recusandae repellat suscipit dolores.

H2: Sint maxime vel quo non dolore voluptatum qui.

H3: Sunt porro est debitis sit.

H4: A aut cum et sint aspernatur nihil.

H5: Aut ut qui non iusto rerum.

H6: Tempora velit occaecati inventore debitis rerum praesentium.

---

Image Icon

Images default to span 100% of the container on small view. When using the .icon class you can override this behavior so it defaults to its real height/width.

See image icon code

        
<img src="/styleguide/50x50?text=Icon" class="icon" alt="">
        
        

---

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">
    </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" frameborder="0" allowfullscreen></iframe>
</div>
        
        

---

---

Colors