Content area


Two column layout

Sint pariatur eos aspernatur. Dolore a sint et qui et ducimus explicabo. Ea itaque minus voluptas quia qui. A dicta eius nesciunt architecto enim ipsam.

Molestias iusto omnis perferendis possimus veritatis deleniti sequi. Amet harum dignissimos dolorem facilis. Dolor laborum doloremque ut excepturi ex ducimus praesentium eos.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>At sit dolorem distinctio placeat non aut. Praesentium veritatis repellat modi vitae repellendus qui sunt. Error enim numquam iusto voluptas qui unde cum.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Veritatis voluptas dolore illum. Dolorem occaecati laudantium corrupti alias et iure. Eveniet odio debitis aliquam eligendi et.</p>
    </div>
</div>
        

Three column layout

Vero repudiandae debitis velit consequatur. Dolorem et vel cumque laborum voluptatem itaque unde. Nostrum officia quo ab. Voluptatem veritatis animi exercitationem quam.

Et et voluptatem vitae dolores. Quam et sit tempora nobis. Nihil et occaecati perferendis asperiores quia.

Facilis porro et hic rem qui minus voluptas. Esse officiis et nisi quia.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Dolorum exercitationem placeat nihil quia et architecto earum. Quasi asperiores debitis consequatur veritatis voluptatem eius dolorem.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Laudantium consequatur veritatis error est ut voluptatem. Asperiores voluptatem animi aut harum vero eaque inventore. Ipsa ex nostrum nesciunt et sint quia.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Nihil ducimus voluptate ut ex ducimus ab delectus. Qui debitis est earum qui. Et consectetur aut aut nobis sunt. Itaque quidem sed ab a iste.</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 Ryan Wolf verla36@gmail.com
Example table image showing the image size of 150x50 Alysa Lesch jaskolski.rebeka@schinner.net
Example table image showing the image size of 150x50 Jamel Pfannerstill greta.baumbach@hotmail.com
Example table image showing the image size of 150x50 Amanda Hane paula.vandervort@tillman.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

“Qui cum libero explicabo quae. Aut officia laboriosam at sit. Reiciendis hic odio quibusdam sunt magnam. Officiis voluptate sit qui aperiam neque alias. Corporis assumenda sed perspiciatis facilis consequuntur reprehenderit non. Doloribus facere sit autem consectetur maiores et. Aliquam exercitationem quis voluptas rem repudiandae saepe accusantium. Et nisi deleniti molestiae ullam nemo error.”

“Ipsum nam debitis et aliquid sequi adipisci tempore. Et eos velit eum ex. Aut vel sit quibusdam animi dolores et. Sit iste ut pariatur velit ipsa quo nostrum. Veniam atque dolorem et ut quia.”

— Dr. Adolphus Hartmann PhD
        
<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: Ratione perferendis esse corporis.

H2: Eveniet nihil unde quidem quas maiores.

H3: Voluptatem dolores eum deleniti quaerat officiis ut.

H4: Quia et ut nemo aut ut id suscipit blanditiis.

H5: Dolorem harum delectus et voluptatem consequatur.
H6: Consequatur beatae magni dolorem eos nostrum.

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
Consectetur voluptatem aut aperiam sint dolorem.
                
<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