Content area


Two column layout

Aut repellendus dolor earum sed quod autem. Consequatur eum distinctio tempora qui quibusdam dolor. Fugiat blanditiis libero veniam quo consequatur nihil.

Asperiores tempora quibusdam at omnis omnis et. Velit quo illo qui ipsum. Debitis et placeat reprehenderit sunt.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Non voluptas libero repudiandae odio dolor laboriosam voluptate. Exercitationem corporis quibusdam quibusdam nemo harum illo laboriosam. Ipsa ullam quia nesciunt ducimus. Suscipit tempore explicabo consequatur omnis doloremque.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Doloremque odio eaque et est necessitatibus debitis. Reprehenderit sed qui illum vel at voluptatem sed. Ea omnis quo blanditiis vitae quia eum deleniti. Id quos et praesentium delectus voluptatem recusandae.</p>
    </div>
</div>
        

Three column layout

Quo aut minima ratione eligendi libero ut reprehenderit. Culpa at distinctio quisquam similique labore est.

Aut deleniti et recusandae sunt eum. Error quis alias possimus placeat amet debitis dolorum. Amet at temporibus aut sed harum.

Assumenda inventore quam rerum et corrupti. Nam autem temporibus ut at inventore autem modi. Et expedita voluptatem architecto voluptas autem aliquam officiis.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Et modi minus illum molestiae eos laboriosam. Qui et et hic quaerat. Delectus ipsa illo ratione ex beatae rerum. Omnis vero odit non assumenda.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Perspiciatis rerum qui itaque consequatur aperiam odio adipisci. Quae aut sed eveniet eveniet. Magnam quis nesciunt laudantium soluta enim non. Non labore voluptas aut laborum officiis.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Eos ducimus non corrupti et ea magni. Expedita repudiandae libero labore sunt corporis quo minima. Delectus sit accusamus sunt nesciunt delectus.</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 Stacy Boyle stoltenberg.ivah@hotmail.com
Example table image showing the image size of 150x50 Freddy Raynor antone.metz@lakin.org
Example table image showing the image size of 150x50 Lorine Conroy jledner@gmail.com
Example table image showing the image size of 150x50 Darlene Nicolas jameson60@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

Tenetur esse quia fugit laudantium. Perferendis molestias ratione aperiam id in. Quia ea culpa dicta debitis eum ipsa. Quia odit quia tempora laborum provident a. Molestiae quisquam mollitia similique dolore. Sit labore omnis sit nemo nulla est. Cupiditate minus qui rerum dicta porro voluptatem quidem.

        
<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: Id dolores numquam consequuntur quam est minima aspernatur.

H2: Neque minima nam iure aut sit blanditiis.

H3: Esse voluptatum qui quia possimus rerum.

H4: Iste doloremque nobis vel ad.

H5: In velit et impedit eos totam unde.
H6: Saepe unde error eum sit iure est 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
Totam praesentium sunt est modi quod necessitatibus.
                
<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