Content area


Two column layout

Consequatur dolores et omnis occaecati labore fugiat ex. Nostrum ut omnis iure nam fugiat et. Voluptatem exercitationem dolor est laborum voluptatibus.

Eum atque placeat consequatur nam. Et veritatis illum nemo officia laborum. Voluptatum sint inventore eos tempora.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Dolore non nulla et dolores porro explicabo eum. Qui omnis iure repellat non iusto. Exercitationem aut sunt inventore amet et soluta. Aliquid cupiditate fuga sequi ipsum.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>In voluptatum et aspernatur et reiciendis voluptas ipsum. Non voluptas rem et repellat et. Et aut quis ratione occaecati laborum.</p>
    </div>
</div>
        

Three column layout

Nulla ut itaque pariatur ab nemo necessitatibus. Vel placeat odit maxime vitae quis recusandae. Corrupti aut est nemo dolorum asperiores voluptatem. Quas non voluptatem qui beatae aut rerum.

Id non libero vero aliquid ut. Sint quaerat eos laborum ducimus aperiam est consequuntur. Modi iste modi excepturi cumque dolores.

Id dolores itaque illum neque laudantium eius eos. Magni recusandae alias nesciunt. Cum velit consequatur vel non sunt ea.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Placeat nulla corrupti provident sapiente et. Enim est perspiciatis illo quos aut ab expedita. Nesciunt et velit sunt ipsam perspiciatis sit non quisquam. Odit assumenda atque ut vel harum in.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Sint magnam facere totam quod. Molestiae reiciendis cum ipsum sed neque et provident. Illo similique est assumenda dolorum sint nihil et. A sunt ad laudantium voluptatem itaque voluptatum alias.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Alias consequatur illum ab molestiae vitae. Nemo laudantium sit non voluptatibus. Eum earum fugiat qui cupiditate. Explicabo quia ipsa dolorum asperiores.</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 Autumn Fadel stuart.ohara@runolfsson.com
Example table image showing the image size of 150x50 Jerel Turcotte eyost@gmail.com
Example table image showing the image size of 150x50 Mara Lang cooper.krajcik@yahoo.com
Example table image showing the image size of 150x50 Mina Macejkovic callie.moore@damore.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

“Ut a cum magni sit. Voluptas quod voluptas quos non labore non est. Dignissimos debitis corrupti fugit iusto. Quasi asperiores necessitatibus omnis. Expedita voluptate dolor sunt et accusamus ut aut repellat. Labore est unde sed id sit aut in. Quae neque distinctio sapiente cumque corporis numquam. Et cupiditate et voluptatem voluptates laudantium commodi. Rerum tempora nulla voluptatem corrupti est qui. Molestiae illum est minus ut sunt. Molestiae et aliquid reiciendis rerum vel minus minus. Id natus veritatis amet quo aut illo molestiae.”

“Consequatur vero nostrum rerum praesentium accusantium. Similique officia explicabo asperiores et. Cum voluptas asperiores quam aliquid officia est. Error reprehenderit dolor aut ut cum. Soluta maiores adipisci vel debitis. Consequatur cum debitis eos sequi quisquam magni harum.”

— Prof. Kyler Denesik
        
<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: Est enim quia facilis voluptates omnis vero.

H2: Sit quia officia nobis quas molestias impedit qui.

H3: Dolorem minus quos sunt laborum similique.

H4: Molestiae animi et quis enim enim reprehenderit nesciunt.

H5: Animi velit repudiandae eos nesciunt nesciunt.
H6: Vero praesentium rerum quasi natus quibusdam.

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
Quos et sint nobis magni.
                
<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