Content area


Two column layout

Voluptatem dolor ducimus quam incidunt ut voluptas. Inventore debitis fugiat et minima et. Ut nemo non et itaque a aliquam tempore voluptas.

Non dignissimos inventore ea recusandae. Odio qui rerum eos est sunt ducimus. Consectetur qui nihil cum quas sapiente. Iusto sed et optio perferendis blanditiis.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Dicta excepturi consectetur porro aperiam incidunt odit. Omnis sunt veritatis eum similique libero id. Non maiores et enim architecto.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Velit qui et saepe sunt libero molestiae esse. Nemo dolor beatae adipisci aperiam necessitatibus vitae. Ipsa corrupti laudantium cum rerum officia quo. Nisi dolores vitae omnis commodi repellat eius maiores.</p>
    </div>
</div>
        

Three column layout

Alias vitae itaque nostrum quod sed quia dolores. Aliquid explicabo voluptas nostrum alias. Asperiores inventore est nostrum voluptatibus impedit.

Aliquam a in et reprehenderit deserunt quam earum tempora. Modi optio est facere repellendus illo aliquid dolorem rerum. Autem qui tempora necessitatibus necessitatibus quo dignissimos. Aut assumenda similique quos illo occaecati qui.

Et optio voluptatum sed. Omnis unde voluptatum ab laboriosam laudantium. Debitis qui repudiandae quas tenetur amet enim. Modi atque aliquid facilis nisi optio distinctio.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Autem magnam fugiat ut vero iure impedit atque. Quae sed earum velit assumenda. Voluptas consequatur et explicabo veritatis. Voluptatem accusamus est et vitae.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Voluptatem eaque in explicabo esse quas quisquam. Et est ea dolores praesentium similique in. Et in quis atque et.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Et suscipit aut animi libero omnis. Error et deleniti velit quidem.</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 Alejandrin Kautzer gerda.cormier@yahoo.com
Example table image showing the image size of 150x50 Hosea Beer xboyle@hotmail.com
Example table image showing the image size of 150x50 Zackery Brown hirthe.naomie@yahoo.com
Example table image showing the image size of 150x50 Thora Kertzmann cartwright.alfreda@mertz.biz
        
<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

“Harum temporibus voluptatum ut molestias corrupti maiores possimus. Nemo enim asperiores sint corporis. Perferendis error occaecati dolorem perferendis adipisci dolore aperiam. Consequuntur nemo voluptatibus alias eos qui qui iure. Ullam totam odio nam temporibus fugit. Reiciendis molestiae eaque odio non exercitationem voluptatum. Similique assumenda rerum dolorem voluptatem porro. Quia omnis quaerat libero consequatur nostrum eligendi architecto.”

“Mollitia est expedita nihil repellat itaque illo. Non nam aspernatur soluta veniam. Quaerat aperiam in rem velit ullam aliquid.”

— Ms. Jennyfer Hoeger
        
<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: Culpa expedita maxime excepturi nostrum et maxime.

H2: Molestiae eveniet ipsum voluptas praesentium dolore.

H3: Maiores optio quia autem repellat consequatur occaecati incidunt quo.

H4: Accusamus enim ipsam nostrum cumque at nesciunt et harum.

H5: Labore aliquid harum est sed.
H6: Est dolorem molestiae animi est omnis.

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
Quis aut porro qui dolorem dolores quia ut.
                
<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