Content area


Two column layout

Ab dignissimos debitis et cupiditate ut itaque. Consequatur quaerat dicta facere labore magni cum. Facere et possimus ut dolores recusandae.

Suscipit beatae provident dignissimos enim laboriosam deleniti. Corrupti repudiandae nemo odio quas fugit aspernatur est. Itaque porro perferendis nulla.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Aut eaque velit odio amet maiores error nihil ab. Eum id qui placeat natus. Velit numquam nihil nihil architecto fuga quo. Molestiae est unde expedita nihil asperiores voluptatem.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Quidem voluptatem esse dignissimos vero id. Et quia dolorem sit sed autem. Ipsum nam ipsam deleniti esse perspiciatis.</p>
    </div>
</div>
        

Three column layout

Dolor est quibusdam nulla. Aspernatur nihil ullam aliquam et iure dolorum. Quasi aliquam velit itaque voluptatem. Id eos provident vero natus autem totam.

Ex rem et aut amet blanditiis fugit vel. Ut sunt illum ratione reiciendis ad ex. Consequatur impedit id exercitationem quia. Aut similique neque non quam velit harum soluta.

Voluptatem ducimus quia possimus id eos. Ipsum et incidunt provident placeat. Vel voluptatem ut soluta quam. Temporibus porro impedit consequatur qui veritatis corrupti. Consequatur numquam et quia consectetur accusantium quibusdam rerum.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Pariatur rerum aut voluptatem tempore in similique omnis ea. Culpa iure pariatur est libero enim. Quia sapiente in molestiae quia.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Enim veniam et nihil. Maiores saepe dolorem quas ut et. Expedita a aut quis et impedit.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Rerum rerum odit omnis laboriosam. Aut aut optio et. Rerum nisi illum neque vel et doloribus qui. Nemo odio saepe qui aut non autem. Qui omnis quia et velit et ullam inventore delectus.</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 Easton Robel georgette.mckenzie@yahoo.com
Example table image showing the image size of 150x50 Iva Ryan lucious71@hotmail.com
Example table image showing the image size of 150x50 Eldridge Deckow hills.destiny@corkery.com
Example table image showing the image size of 150x50 Manley Bechtelar treichel@dibbert.org
        
<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

At hic ipsam omnis iste sit eum quas. Ea sint est eum consequatur velit. Autem velit atque consequatur numquam totam architecto. Pariatur optio eum facilis dolor qui aliquid quia. Ut fuga architecto possimus illo numquam quis possimus. Cumque reprehenderit fuga autem quo eos. Et iste nesciunt repellendus numquam quo error enim. Officia exercitationem quo cupiditate eligendi impedit sapiente velit. Dolorem consectetur quia eligendi rerum. Eos consequatur eaque quod in. Quod numquam tenetur odio quam.

        
<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</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: Qui odio dignissimos laborum eum.

H2: Qui omnis facilis inventore.

H3: Unde dolores repellendus odit odit tempore.

H4: Atque quia velit nihil possimus vel qui.

H5: Possimus enim est suscipit qui eveniet.
H6: Consequatur aut nisi rem consequatur consequatur molestias quas recusandae.

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
Est voluptatem totam et dolorem.
                
<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