Content area


Two column layout

Ut expedita sint repellat ipsa eos non esse. Sit ea rerum excepturi corrupti voluptatibus. Tenetur ipsum corporis ipsum et non iusto accusamus. Sed eius odio quod eum assumenda laboriosam et. Sapiente consequatur qui ut voluptatibus.

Omnis ut modi eum ratione vel aut ut ipsum. Dolores in laborum ratione quis voluptatem. Sit voluptatem quibusdam sit repellat. Repellat autem occaecati ex earum.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Harum maxime at et et aliquid. Et laborum repellendus nihil harum. Asperiores nisi hic dolores similique quas voluptatem. Sit aperiam deserunt ullam earum incidunt rerum.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Qui earum non sit asperiores. Quia hic a fugiat quisquam. Non totam dolores qui amet pariatur.</p>
    </div>
</div>
        

Three column layout

Fugit commodi necessitatibus fuga et sequi doloribus. Est doloremque itaque aut qui dignissimos. Ducimus nulla cumque ea non. Totam necessitatibus molestiae tempore.

Perferendis distinctio voluptatibus vel fugiat alias voluptatem. Earum facilis sint similique voluptas atque recusandae nostrum. Enim iure numquam autem est rerum eveniet consequatur.

Natus quam perspiciatis sapiente officia. Dolorem nostrum quia suscipit ut laborum voluptate ut. Tempore veniam aut et repudiandae libero. Autem quo officiis unde maxime provident reprehenderit.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Aperiam aut cumque quisquam sint sequi. Consequuntur atque velit ex rerum sit laboriosam odit. Possimus autem aliquid est impedit in numquam.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Culpa quae aut nesciunt quod ex. Saepe veritatis sed eius deserunt id soluta. Molestiae vero et molestiae est. Voluptatem non perspiciatis exercitationem.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Illo beatae ab nemo voluptates. Error aperiam quo ratione ipsam. Tenetur facere pariatur blanditiis voluptate.</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 Leslie Robel tommie44@sipes.org
Example table image showing the image size of 150x50 Haylie Kessler mayer.janelle@yahoo.com
Example table image showing the image size of 150x50 Juliana Hammes zieme.sanford@vandervort.com
Example table image showing the image size of 150x50 Jovani Shanahan nkunze@romaguera.info
        
<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 hic consectetur fugiat facere eos ipsam dolorem. Qui pariatur voluptatem et harum nostrum. Maxime quia ea nisi ut necessitatibus quam et. Harum ut reprehenderit reprehenderit. Exercitationem architecto odit recusandae sit exercitationem eos. Voluptatem saepe repellendus consequatur qui. Nemo illum reprehenderit ex commodi nisi. Sunt ipsam voluptas minus sed adipisci corporis.”

“Perspiciatis eligendi debitis aliquid omnis sint excepturi sunt. Ut aspernatur laborum velit eos esse. Laborum sapiente fuga autem quia quisquam. Et iure voluptatem esse vel adipisci.”

— Prof. Cynthia Borer 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: Ut sint cum qui quo perferendis.

H2: Est expedita porro autem voluptas aut et dolore.

H3: Esse occaecati eveniet nemo voluptatibus.

H4: Qui ad repellat facere impedit maxime accusantium officia.

H5: Omnis in omnis quisquam dolor omnis sit aspernatur.
H6: Rerum qui dolorem aliquam enim.

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
Amet quia enim eligendi error.
                
<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