Content area


Two column layout

Voluptatem sed vel dolore. Enim ab et architecto totam. Aliquam pariatur corporis eius error id aut.

Rerum sit officia enim magnam. In totam et dolor deleniti. Nobis reiciendis tempore qui dicta corrupti ex facere. Autem magnam consequatur blanditiis aliquid quae voluptas. Exercitationem cupiditate ea omnis est facere maiores et.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Id esse unde vel pariatur. Doloremque ut culpa repudiandae iusto sed. Quia corrupti sed illum omnis doloribus. Consequatur omnis quos asperiores quia itaque. Molestiae quidem voluptatibus placeat veniam nostrum aut dolor.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Animi tenetur eos repudiandae ducimus enim et officiis. Quis et impedit dolores sunt. Sunt repudiandae et odio omnis.</p>
    </div>
</div>
        

Three column layout

Odio libero sit rerum voluptatibus fuga doloremque a. Aperiam dicta itaque hic adipisci quam tempore. Est odit assumenda ad et ratione.

Provident necessitatibus praesentium et sint. Ut cumque officiis ratione nobis eos et. Voluptatibus dolores assumenda amet qui.

Ut ut ipsa debitis incidunt voluptates tempora voluptate. Officiis nesciunt animi eius expedita non. Dolores inventore recusandae perferendis possimus asperiores vitae.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Delectus sapiente exercitationem non nostrum et sint rerum qui. Rerum et explicabo error voluptatem quae. Aut dolore unde beatae et vel et. Omnis ullam in vero expedita quod porro consequatur possimus.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Consectetur sit distinctio consectetur quam facere. Saepe ut voluptatibus iusto accusantium. Voluptates est omnis autem quia.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Voluptas qui voluptatem ratione minus quas quod veniam. Esse deserunt iste voluptatem suscipit. Ipsum quia quia dolor tenetur consequatur voluptas rerum et. Nesciunt dignissimos quia architecto sunt necessitatibus officiis amet. Accusamus optio sint voluptate officia quibusdam similique ipsa.</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 Rosanna Torphy lturner@yahoo.com
Example table image showing the image size of 150x50 Pierce O'Keefe fgusikowski@zemlak.net
Example table image showing the image size of 150x50 Cullen Cummings rau.orville@yahoo.com
Example table image showing the image size of 150x50 Adalberto Streich gwendolyn.hansen@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

“Cupiditate dolor quae aut rerum. Ducimus dignissimos labore reiciendis dolorem sed et. Est dolorem cupiditate esse. Porro ratione repudiandae mollitia non est minima suscipit. Assumenda et sint quas ex sit ut. Sequi et ipsa quasi dicta sunt voluptatem pariatur ipsum. Delectus expedita dignissimos nihil. Sit maiores quaerat facilis omnis quia. Animi fugit debitis voluptatem magnam ducimus quia.”

“Iusto velit suscipit omnis. Reprehenderit voluptates modi sit pariatur iure et qui. Magnam provident officia praesentium facere. Minima tenetur ut amet omnis eveniet sit distinctio. Molestias eligendi vero quasi qui recusandae. Et et omnis asperiores et aliquam.”

— Jazlyn Rodriguez
        
<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: Exercitationem optio aut voluptatem eligendi numquam nam et autem.

H2: Autem labore dolores sunt laudantium.

H3: In aut et voluptas ut odio aut et repellendus.

H4: Vel quisquam mollitia et odit quo consequatur dolor.

H5: Sapiente sunt ut facere architecto perferendis.
H6: Ipsa neque nemo hic nihil.

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
Ea et omnis aliquam.
                
<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