Content area


Two column layout

Laboriosam id inventore ratione dolores accusantium repudiandae optio. Magni praesentium officia commodi recusandae rerum. Ex omnis facere voluptatum harum aut repudiandae sequi aliquam. Animi voluptas nesciunt fugit.

Deserunt neque tempora dignissimos dolorem consectetur ducimus quisquam. Neque rerum in est et sed eveniet vel. Ipsam porro totam eum. Nulla rem et esse non quia.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Autem laboriosam quia ullam aperiam consequuntur repellendus alias. Sunt molestias et hic id et eveniet. Eaque earum temporibus omnis non qui iste ex quasi. Omnis facere quia maxime maiores similique accusantium quo.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Iure unde enim provident qui repellat. Dolor cupiditate aut nulla ut. Doloribus quis officia est veritatis sequi ullam.</p>
    </div>
</div>
        

Three column layout

Modi alias est et molestiae rerum officia. Voluptate perferendis dolorem alias soluta assumenda velit. In ea dolorem et voluptate aut.

Cum tempore iste omnis iste. Qui deleniti voluptas tempore nisi cum architecto.

Consectetur ad voluptates recusandae et omnis qui voluptatem dolores. Dolore voluptates unde est voluptas neque. Fuga laboriosam ratione assumenda rerum ex rem. Earum rerum expedita ut asperiores rerum.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Delectus voluptatem sit ipsum id. Perferendis provident consequatur iusto aut aut nam. Fugiat aut nihil error ut doloribus.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Exercitationem facilis perspiciatis nisi delectus veritatis neque nihil incidunt. Aspernatur eum esse aut. Et nihil enim impedit adipisci hic mollitia natus id. Pariatur cumque est et ut.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Voluptatem consequatur eius rerum omnis vitae consequatur est. Tenetur dolore dolor dolorum eligendi odio. Quidem accusamus voluptate eos. Fuga dolor nemo quod sit.</p>
    </div>
</div>
        

Table

Example table with fake contact information
Image First name Last name Email
Example table image showing the image size of 150x50 Faustino Eichmann harber.eugenia@gmail.com
Example table image showing the image size of 150x50 Tiana Orn rath.kellen@conn.org
Example table image showing the image size of 150x50 Flossie Turner ygislason@gmail.com
Example table image showing the image size of 150x50 Derrick Farrell zachery.wintheiser@yahoo.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


Unordered lists

  • First
  • Second
  • Third

Ordered lists

  1. First
  2. Second
  3. Third

Data lists

First
Description of first.
Second
Description of second.
Third
Description of third.

Blockquote

Culpa voluptas optio sint ipsa magnam velit. Ut et eius aliquid nihil cumque maiores vero. Enim magni quo rerum. Libero eum esse et praesentium. Provident suscipit saepe maxime. Ut doloremque rem inventore excepturi laudantium eos. Velit rem soluta ullam.

        
<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: Placeat rerum molestiae commodi porro dicta.

H2: Veniam autem est consequatur dolores delectus incidunt.

H3: Natus itaque laudantium voluptas.

H4: Quae totam tenetur reiciendis est quia mollitia quia.

H5: Non consequatur quo magni consequuntur aut aut.
H6: Fugit est qui ut id a placeat expedita.

Media

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

School of Medicine Commencement YouTube 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>
        

Figure

Example figure image showing the image size of 400x300
Quis necessitatibus ea amet voluptatem rem ut doloribus.
                
<figure>
    <img src="/styleguide/image/400x300" alt="">
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
</figure>
                
More options

Colors

Lightest green
Lighter green
Light green
Base green
Dark green
Darker green
Darkest green
Lightest yellow
Lighter yellow
Light yellow
Base yellow
Dark yellow
Darker yellow
Darkest yellow
White
Lightest grey
Lighter grey
Light grey
Base grey
Dark grey
Darker grey
Darkest grey
Black