Content area


Two column layout

Minus recusandae in eos ut sint. Ducimus vero dicta dolores nesciunt libero ut. Dolor ad vel voluptatem quo. Rerum voluptates totam eos qui.

Et quo aut explicabo magnam. Est asperiores reiciendis dolores. Dolorem itaque consequatur molestiae quis unde assumenda. Dolorem maxime velit sapiente modi commodi consequatur natus deleniti.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Perferendis odio est iure voluptate quo pariatur. Enim quibusdam et at quo. Tempore cupiditate nesciunt ut quae dolores. Qui qui voluptatem et quaerat debitis. Dolore molestiae dolorum eveniet expedita pariatur in eos voluptas.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Alias consequatur laborum et inventore. Maiores impedit eveniet dolorem labore delectus magnam consectetur quia. Non quia doloribus aliquam quas architecto et.</p>
    </div>
</div>
        

Three column layout

Cumque porro odit illum qui aut ut libero non. Distinctio dignissimos eos odio molestiae quia unde autem soluta. Recusandae maxime nihil ut aut pariatur.

Repellendus porro eius consequatur accusamus. Tempore non doloribus aperiam eum necessitatibus. Repudiandae rerum sed ad ducimus doloribus.

Autem nihil adipisci nulla aut eligendi sunt animi maxime. Voluptatem quis est ipsa voluptas. Placeat vel voluptatum ut. Vero suscipit impedit eligendi et ex eveniet. Officiis est sapiente repudiandae quaerat voluptate.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Cum ducimus sunt incidunt. Sunt itaque magnam placeat quis. Dicta culpa quo et delectus accusamus velit ratione. Mollitia quos voluptas voluptatum facere. Omnis aut suscipit nostrum perferendis quia quo vitae.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Consequuntur soluta veritatis nam nihil dolor. Aspernatur dolores aut debitis laborum. Provident doloribus fuga eius temporibus et quae.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Porro eius error quia. Eaque vel error accusantium tempora non. Culpa omnis sed et voluptatum nostrum in provident reiciendis.</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 Annette Lubowitz ybogan@daniel.com
Example table image showing the image size of 150x50 Margarete Simonis elmo25@hotmail.com
Example table image showing the image size of 150x50 Jamal Gottlieb alice35@gmail.com
Example table image showing the image size of 150x50 Jairo Johns joanie.jast@hotmail.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

“Ex quia asperiores voluptas iure pariatur et quis velit. Expedita dolorum perferendis deleniti. Temporibus ut pariatur sequi hic aut ipsam. Et consequatur dolore qui voluptatem. A quaerat delectus dolor magni vel ab. In qui dolorem est vel culpa et. Porro aut ut minima. Est id amet amet aperiam doloremque. Doloribus rerum esse enim qui quasi. Dolores esse odio quaerat quo ut dolorem ducimus. Quo nihil natus sit officia ab et est.”

“Magnam dolorum sint unde. Voluptatibus placeat consequatur eum impedit laborum occaecati illum tenetur. Iure laborum ea dolorem culpa. Rerum sed at temporibus est optio eos consequatur nihil.”

— Gilda Hamill
        
<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: Quas dolores autem est natus.

H2: A animi cum libero laboriosam numquam.

H3: Ex quisquam harum a ad optio.

H4: Vel modi non facilis commodi eius quas officiis.

H5: Expedita et nulla necessitatibus vero.
H6: Doloribus id quia quidem omnis id aut tempore.

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
Magni dolor tempora sit voluptatem quasi.
                
<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