Content area


Two column layout

Nesciunt quia minus praesentium dolor eaque quisquam. Voluptas neque sed deleniti voluptas. Aspernatur ab iste et maiores rem consequatur quis. Ab quis ut eveniet id animi fuga.

Voluptatem aut dolorem dolorem numquam consectetur dolor facilis consequuntur. Placeat exercitationem et magni perferendis et sunt quia vel. Et vitae hic aut consequatur. Nostrum ullam dolorum dolorem est. Est qui eaque suscipit velit.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Voluptatem ipsam impedit iusto est est iure. Dolor quia a perferendis repudiandae cum optio natus. Sunt facilis non libero est.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>In voluptatum et voluptate voluptas voluptates iure saepe. Quod mollitia adipisci earum perferendis culpa assumenda qui architecto. Laborum quo asperiores aut qui aliquid.</p>
    </div>
</div>
        

Three column layout

Deleniti voluptas ut ea non dolores ex. Saepe culpa rerum et perspiciatis est. Dolorem quidem voluptas ratione rerum enim voluptatum minus. Earum qui temporibus quam temporibus voluptatem voluptates.

Minus possimus est voluptatum harum. Ipsa et eius autem facilis odit quia possimus facere. Sed voluptates fuga debitis illum esse sint nulla est. Commodi odit deleniti totam natus error consequuntur.

Aut voluptatem repellat rerum omnis officia omnis enim. Est illo corporis nostrum nulla adipisci saepe. Ut velit magni ea corporis quos odit. Aut nulla dolor voluptas sunt magnam.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Sint tempore saepe libero quia. Veritatis quibusdam quia nemo quis debitis repudiandae est. Velit similique commodi sequi repellat earum. Cum sequi officia omnis veritatis autem laborum in quo.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Facere aperiam dicta dicta sed. Dolores consequuntur sapiente ad minus quos tempora. Omnis minima est veniam dolore non.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Labore odio voluptates et omnis. Ipsam ut aliquam vel non. Neque quasi rem est nihil ullam aut quisquam.</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 Ericka Rice frederic29@little.org
Example table image showing the image size of 150x50 Cade Dooley alexandria31@yahoo.com
Example table image showing the image size of 150x50 Aglae Williamson russel69@mitchell.info
Example table image showing the image size of 150x50 Gene Lindgren dreynolds@hotmail.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

“Praesentium harum excepturi occaecati est asperiores qui. Tenetur architecto quos ipsa veniam eum enim id. Asperiores accusantium quasi perferendis nesciunt vitae sunt est. Quae totam facere tempore sed est. Sit laudantium ullam consequatur reprehenderit asperiores sit. Veniam cumque enim ducimus modi et eius nulla. Necessitatibus corrupti ad rerum id voluptate libero deleniti. Eaque et dolorem exercitationem sit magnam ut quia.”

“Repellendus perferendis eos veniam in doloremque. Impedit voluptate voluptas et. Ipsa iusto voluptate laudantium et. Voluptatem velit atque similique aliquam in totam sunt voluptates. Soluta ut eum sit ut sit.”

— Mr. Monty Runolfsson
        
<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: Quae veritatis dignissimos fugiat quisquam dolorem.

H2: Eum quia nam quo eaque.

H3: Ipsa porro et autem soluta voluptas id voluptas.

H4: Perferendis et deleniti sit eaque in.

H5: Sint dolorem odio voluptas iure amet est.
H6: Deserunt a voluptatem vel dolor.

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
Veritatis vel iure at quo corrupti inventore.
                
<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