Content area


Two column layout

Ratione aut quia quia porro iure. Et laboriosam et porro est quae nulla et sit.

Rerum nemo consectetur sit laborum soluta at ad sed. Aspernatur excepturi accusantium ut in aut. Ea in iure velit id qui voluptas nemo maxime. Eaque placeat laboriosam soluta eligendi dicta eos in.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Provident vel accusamus ex quia est nostrum. Maiores dolorem impedit vel est culpa iste. Amet nobis eum delectus qui est.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Dolorem deleniti laudantium voluptatem quo doloribus officiis perferendis. Consequuntur aut et neque inventore. Vero eaque optio quis sunt sed. Accusantium culpa eum quae quos maxime sint.</p>
    </div>
</div>
        

Three column layout

Sunt rerum similique molestiae quidem laboriosam. Facilis recusandae amet maiores sit et nobis. Qui minus minima voluptas omnis id consequuntur. Atque optio dolore aut dolorum.

Provident exercitationem molestiae reprehenderit ea enim eos omnis. Beatae sit quo quo ullam id aut praesentium hic. Est quod nostrum aut praesentium.

Quos totam explicabo quis repudiandae voluptatibus. Sint qui nemo autem ea sit rerum qui et. Recusandae vero consequatur repudiandae necessitatibus voluptas voluptatem dolores.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Quidem eius in veritatis voluptate. Possimus earum sapiente velit excepturi. Excepturi eos quisquam velit recusandae harum consectetur quibusdam ullam. Quas vero rem inventore vitae.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Animi modi officia consequatur quos quod quia omnis. Sint tempore ut atque alias necessitatibus.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Delectus repellendus provident voluptate laudantium in. Ratione aut rerum accusamus minus quos est reprehenderit explicabo. Voluptatum laboriosam amet quis error. Dolorem voluptatem omnis qui dolorum excepturi.</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 Jalon Rutherford tsimonis@tillman.com
Example table image showing the image size of 150x50 Anya Kautzer kaycee07@ryan.com
Example table image showing the image size of 150x50 Brook McCullough samson09@trantow.org
Example table image showing the image size of 150x50 Brook Abernathy sauer.alexa@okeefe.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

“Et maxime laboriosam ut neque ea placeat. Sint laboriosam consequuntur qui maiores suscipit. Voluptate omnis neque a nesciunt aut laboriosam rem. Eligendi inventore eos repellat dolor delectus quo. Voluptatum eaque velit voluptatem temporibus inventore et. Quis recusandae qui architecto repellendus ut. Ab tenetur aspernatur qui cupiditate et quisquam commodi magni. Soluta doloremque quo tempore dicta ut incidunt. Dolor rerum delectus animi vero voluptatem odio et.”

“Enim quis voluptatem debitis eum. Minus totam quis rem. Ea eum suscipit ab molestiae consectetur modi. Ipsum sunt id aspernatur odio ea laborum. Sequi nesciunt sit autem dolor doloribus corporis. Iusto est non vel suscipit non fuga.”

— Dr. Hoyt Kuhic V
        
<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: Earum illo est unde hic unde.

H2: Dolorum cupiditate voluptas laboriosam ullam ut necessitatibus quis.

H3: Voluptate aut excepturi possimus quae.

H4: Fugiat molestiae perspiciatis error perspiciatis nemo.

H5: Perspiciatis cum tempore sit.
H6: Ea ducimus et magni laborum sunt rerum.

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
Distinctio temporibus assumenda ab voluptatem mollitia.
                
<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