Content area


Two column layout

Expedita qui corporis et eum adipisci at delectus. Excepturi nihil voluptatem quo. Ut voluptas corrupti iure magni. Aut id ut facere ut sit.

Fugiat sit non corporis et. Officiis nihil quibusdam cupiditate.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Libero dolores distinctio molestiae dolorum voluptas molestiae qui. Voluptas natus dolores aut vel aspernatur. Sapiente qui quibusdam mollitia aliquid nulla quidem cum. Distinctio voluptatem praesentium dolores odit.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Sit accusamus iusto fugit pariatur. Illum odio est quis in. Delectus velit cum iste illum quod voluptates. Doloribus nesciunt sit quo placeat labore nostrum sunt explicabo.</p>
    </div>
</div>
        

Three column layout

Aliquam nihil perferendis est ea et. Eos quasi debitis sunt nam. Maxime corrupti ad tempore sed ad. Molestias eum est ea quam amet autem nesciunt et.

Consectetur ab recusandae accusantium neque aperiam. Nostrum aut odio non quia qui. Aspernatur nesciunt quia in sint. Qui id suscipit tenetur id perferendis optio iusto laboriosam.

Numquam et adipisci tempora amet enim est modi provident. Velit vero quod ut ipsa. Cupiditate harum illum rerum officia unde.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Quaerat nulla id dolor deleniti enim facilis. Quis assumenda alias ea non mollitia. Et cumque facilis voluptas cum et qui.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Tenetur dolor dolor nesciunt vitae ut facilis. Quis dolores quo provident sint aliquam sint. Illo sunt qui quo et voluptatibus quidem vel. Aut expedita sint dolores laboriosam iure quisquam.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Laborum tempore quos sit est. Saepe voluptatum aut laborum quo impedit voluptates corrupti. Ad ea et quis et ut.</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 Tevin Herman ternser@cartwright.com
Example table image showing the image size of 150x50 Delia Quitzon mateo19@bayer.net
Example table image showing the image size of 150x50 Janick Bergstrom simonis.mackenzie@yahoo.com
Example table image showing the image size of 150x50 Halle Corkery adell.schuppe@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

“Fugiat sint porro et vel totam est molestiae cumque. Praesentium qui quam ipsum error voluptatibus. Provident magni tempore odit assumenda quia reiciendis. Fugit odit cum excepturi molestiae dolor. Autem nobis asperiores harum nihil culpa inventore excepturi. Sed accusantium dicta aliquam quis aut. Sapiente aliquid itaque corrupti et. Est deleniti odio ut officiis et vel. Atque praesentium quis libero reprehenderit porro.”

“Eum veniam dolorum earum sed deserunt quaerat porro. Non sit tempore velit unde. Asperiores numquam maxime perspiciatis dolore. Voluptate qui est nesciunt iure earum eaque optio.”

— Sydnee Medhurst IV
        
<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: Ut quia sint rerum harum asperiores consequatur quasi.

H2: Similique suscipit qui et delectus omnis voluptatem.

H3: Quis eius aperiam dolores unde tenetur rerum.

H4: Ipsa aliquam omnis autem quo laudantium repudiandae fugit.

H5: Omnis dolorem est possimus beatae voluptatem sequi omnis.
H6: Nostrum in commodi ad voluptate assumenda eos quia.

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
Similique eum dolores consequatur hic assumenda.
                
<figure>
    <img src="/styleguide/image/400x300" alt="">
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
</figure>
                
More options

Colors

Lightest green #acc9c0
Lighter green #71a192
Light green #3d7a67
Base green #0c5449
Dark green #093f39
Darker green #072e29
Darkest green #05211e
Lightest yellow #fff2c9
Lighter yellow #ffe596
Light yellow #ffdb6f
Base yellow #ffcc33
Dark yellow #d8ad2d
Darker yellow #ae8f30
Darkest yellow #866e26
White #ffffff
Lightest grey #f2f2f2
Lighter grey #e6e6e6
Light grey #d9d9d9
Base grey #babfbf
Dark grey #949999
Darker grey #575959
Darkest grey #323333
Black #181a19