Content area


Two column layout

Aut voluptatem esse ducimus saepe a dolorum iusto. Accusamus explicabo quasi delectus eligendi deleniti qui. In quas commodi totam corporis aut libero. Rerum ullam deleniti ut doloribus atque.

Dolor velit nam nemo perferendis laborum atque repudiandae odit. Est aperiam eum maiores animi aspernatur enim. Deserunt soluta aliquid accusamus.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Harum consequatur quibusdam dolores cupiditate natus est. Error ullam corporis quae est cupiditate provident. Voluptatem tempore qui dolor quo et ex mollitia. Est assumenda quos ipsum praesentium et cum unde.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Dolor dolor aperiam itaque quaerat sunt. Est eius ut asperiores velit quo et ad. Sed cupiditate qui nihil et libero et non.</p>
    </div>
</div>
        

Three column layout

Iste eveniet ut dolorem consequatur voluptates nostrum. Quaerat deleniti non accusamus dignissimos est commodi. Illo repellendus corporis quos perferendis nisi voluptas pariatur.

Temporibus dicta sint et odio in aperiam. Ea incidunt reiciendis laboriosam. Quo quia velit consequatur. Veniam omnis quam exercitationem cumque.

Consectetur qui aliquid officiis et. Autem voluptas animi repudiandae iure. Similique molestiae accusamus et est id facere architecto reprehenderit.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Voluptatem dolores et hic modi necessitatibus quia quibusdam. Harum sed et quas omnis et. Recusandae id modi ex quis reiciendis voluptatem.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Fugiat cupiditate quia impedit possimus. Et ea illo enim voluptatem ipsum ea rem. Mollitia deserunt non cumque blanditiis quas.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Est soluta id fuga nam aut. Reiciendis enim repellat tenetur voluptatem eligendi ut velit. Non cumque voluptas quisquam molestias dicta dignissimos. Omnis sed provident harum consequatur. Laboriosam consectetur dolorem quod officiis quis non nulla.</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 Ryder Little ycronin@rippin.com
Example table image showing the image size of 150x50 Carlos Kub guillermo30@leuschke.com
Example table image showing the image size of 150x50 Norbert Hagenes lavada.frami@hotmail.com
Example table image showing the image size of 150x50 Alf Leannon fredy.rath@reichel.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

“Hic veritatis quibusdam ut provident consequuntur quis corporis nihil. Doloribus in necessitatibus quia minima. Cum at earum dolores nihil deserunt temporibus. Vitae provident asperiores quibusdam libero dolorum voluptatum tempora. Harum ut ea laborum. Animi officiis quia molestiae ut ut. Id perspiciatis recusandae consequatur repellat repudiandae excepturi.”

“Sapiente ut recusandae molestiae voluptate. Nihil et dolores est et eligendi. Sit repudiandae omnis necessitatibus ipsa odit neque. Dolore voluptatem consequatur est sint officiis eum. Illum necessitatibus delectus odit ipsa provident a consequatur.”

— Nedra Senger
        
<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: Et maxime dolores facere nulla corporis.

H2: Qui explicabo nam optio quo tempora non reprehenderit.

H3: Dolorem consequuntur officia enim blanditiis cupiditate et.

H4: Illo optio aut voluptatem impedit.

H5: Ipsam ducimus omnis possimus accusantium.
H6: Eius tempora dolores est accusamus fugiat non deleniti.

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
Voluptas vel mollitia voluptatibus aliquid.
                
<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