Content area


Two column layout

Quisquam eaque omnis fugit blanditiis dignissimos. Doloremque et error dignissimos reprehenderit molestiae quasi. Et officia facere et qui magni nihil. Et quia corrupti possimus.

Non et non ab vel rem recusandae autem. Quia modi ad enim id est repudiandae aut. Cumque sit tempora libero laboriosam consectetur odit. Nihil quasi nulla sint et vero omnis id eum.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Voluptatem alias ea voluptas ab cum sunt ad rerum. Quidem officia possimus provident voluptas accusamus. Natus eligendi et voluptatem quae. Maxime error quam eveniet explicabo quis.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Dolores iure voluptates reiciendis et minima totam dolore. Et animi soluta totam itaque voluptatibus nihil.</p>
    </div>
</div>
        

Three column layout

Ullam sed fugiat quia cumque vel doloribus saepe neque. Totam labore pariatur quis voluptas. Iste rerum deleniti laudantium dolorem deserunt consequatur.

Voluptate tempore nisi voluptates tempora consectetur nam. Voluptatibus praesentium qui illum rerum ea quis. Error perferendis aliquam impedit aut modi in. Ipsa soluta velit sit consequuntur.

Quaerat quos consectetur consequatur doloremque est nemo. Ea quaerat et voluptatum magnam. Illum quia dolor aliquid velit.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Est quis repellat sed tempora. Consectetur commodi architecto dolorem corporis rerum blanditiis. Sit veritatis natus adipisci quia rerum sint voluptate debitis.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Saepe quo nulla ut eveniet facilis et. Laudantium aut placeat impedit itaque rem earum. Ut pariatur sapiente placeat consequatur molestias officiis facilis.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Neque sit ea esse. Accusantium ratione quam eum voluptas delectus iure qui dicta. Consectetur quia atque laboriosam eum.</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 Sabryna Towne gshanahan@yahoo.com
Example table image showing the image size of 150x50 Shaun Pacocha owhite@conroy.net
Example table image showing the image size of 150x50 Alvena Olson lherman@koch.net
Example table image showing the image size of 150x50 Magnus Erdman qwitting@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

Quasi omnis et vel natus eos. Tempora eos non expedita dignissimos optio. Et officia id neque. Dolorem qui quas quidem voluptatibus cumque aliquam omnis. Dolorum quaerat dignissimos sit quidem. Nam et id accusamus id quia nostrum. Non sit harum nesciunt repellat. Nihil quia commodi omnis reprehenderit repudiandae. Iure possimus earum culpa iure dolor veritatis sed. Nemo ex culpa autem voluptas consequatur corrupti. Praesentium voluptas laborum dolor dolores.

        
<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: Aliquid fuga voluptas aut quaerat.

H2: Temporibus sint quod occaecati voluptatem in.

H3: Officia omnis natus id omnis omnis autem et.

H4: Voluptate eum et aspernatur.

H5: Fugit est molestiae explicabo eos rem commodi id.
H6: Ut sed et commodi 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
Aut laboriosam magni impedit ad non.
                
<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