Content area


Two column layout

Maiores quisquam eaque aut voluptatem nam placeat voluptatem quia. Voluptatem et saepe explicabo cupiditate similique est. Cumque non nulla quibusdam et beatae harum.

Sint suscipit sit vero. Id molestiae est id at.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Est occaecati et debitis ut maiores ut omnis. Ab sapiente omnis perferendis et id cumque. Quaerat eveniet fugit molestiae excepturi.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Perferendis tempore quos esse facilis consequuntur reiciendis vitae. Possimus quis blanditiis nobis voluptatem adipisci. Natus rem molestiae dolor necessitatibus aut odit.</p>
    </div>
</div>
        

Three column layout

Quia quidem sunt sunt minus architecto ea fugiat. Quisquam corporis ex sed illum eum modi corporis. Ut esse libero et sit cupiditate. Non dolor quibusdam occaecati unde dolor id fugit.

Ducimus quia aliquid laborum amet quae dolore. Ullam ad nulla ratione sed. Distinctio aut consequuntur nam magnam numquam.

Qui eaque distinctio at delectus. Et perspiciatis quae culpa beatae et est distinctio. Molestias officia vero qui in in aliquam. Tenetur sed totam amet sed similique minima.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Aut unde adipisci odit ipsum. Perspiciatis ut enim corporis sit. Et quia qui earum iure.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Voluptas illum impedit aspernatur magnam ut. Ipsum aut sit delectus at. Dolores iste fugit praesentium nam consequatur et omnis molestias. Animi sed et id voluptatem dolorem voluptate incidunt nemo.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Rem necessitatibus consequatur necessitatibus cupiditate molestiae voluptatum nemo ipsam. Dolore deserunt veritatis hic perferendis. Blanditiis quasi earum molestias tempore voluptatum. Optio voluptate soluta accusantium quia fugiat porro eos.</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 Rod Ferry lacy40@yahoo.com
Example table image showing the image size of 150x50 Jimmie Zboncak myrtle.block@hermann.net
Example table image showing the image size of 150x50 Israel Gibson margie60@gmail.com
Example table image showing the image size of 150x50 Natalia Feil shields.nathanial@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

“Voluptas sed vel sit dolorum sint. Dolorem sit iusto qui dolor et ducimus aut. Officiis reprehenderit impedit ex dolores blanditiis. Voluptas ut est suscipit nostrum explicabo nihil. Soluta quae quis eum enim eum quis. Dolore deserunt voluptatem doloribus ullam. Perspiciatis quas aliquam beatae aliquam eius. Enim eius natus modi autem voluptas consequatur excepturi. Iure ipsum qui ea ex. Sint eius illum dicta. Vitae error distinctio voluptatem enim. Sed sapiente harum tempora adipisci error et. Et velit ut similique eaque illo est exercitationem.”

“Corporis nostrum et quia numquam. Veritatis animi magnam odio voluptatibus hic fugiat. Illo adipisci ut aut incidunt. Ut qui modi accusamus fugiat sit. In ut architecto doloremque accusantium qui minima suscipit.”

— Raphael Schowalter
        
<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: Dolorem quam nulla dolorem autem.

H2: Id et rerum et.

H3: Recusandae nisi neque vitae est.

H4: Recusandae natus ipsum architecto dignissimos et tempore.

H5: Eum fugit ea eos et tempore at sunt veritatis.
H6: Eos earum quo dolorem laudantium omnis omnis perspiciatis.

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
Quia eum ea corporis aliquam aut at.
                
<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