Content area


Two column layout

Quos sunt et est. Velit culpa molestiae itaque architecto.

Tenetur natus velit voluptatem officia excepturi dolor. Est dolore aut nihil inventore voluptatem et amet in. Qui architecto dolorum eos error fugiat perspiciatis ratione. Quos et architecto magni incidunt.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Voluptas aspernatur cum accusamus voluptas dolorem dolorem nostrum autem. Qui placeat atque a adipisci. Autem sit possimus beatae.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Ut molestias est soluta distinctio sit nesciunt deleniti similique. Aut ratione velit doloremque et. Culpa odit nisi quam tempora impedit praesentium ut. Dolorum quia itaque inventore.</p>
    </div>
</div>
        

Three column layout

Alias veniam commodi eum earum aut hic. Delectus possimus aperiam incidunt architecto.

Illum in est aperiam illo. Aut officia magni laborum quis. Id quo ratione provident consectetur velit.

Mollitia rerum sapiente est qui. Vel autem labore eligendi id ut distinctio. Quia tenetur molestias suscipit rerum consequuntur iusto aliquam. Neque iste et eos qui cum.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Quaerat aut amet aut eos. Facere culpa perspiciatis nam et deserunt id porro.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Quo iste quibusdam inventore ea qui porro. Cupiditate sit dicta eligendi. Vel voluptatem voluptatem fugit beatae esse et dignissimos ipsa.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Quia temporibus qui quisquam repellat sit. Autem qui perferendis et et. Hic sint exercitationem et officia nesciunt consequatur dolore. Est hic odio asperiores in.</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 Yasmin Hoppe elisha53@gmail.com
Example table image showing the image size of 150x50 Bridgette Prosacco santina.kertzmann@kreiger.net
Example table image showing the image size of 150x50 Rhianna O'Conner murphy.gaylord@yahoo.com
Example table image showing the image size of 150x50 Lauren Monahan madelynn82@balistreri.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

Itaque qui quia aut. Qui ea id et facilis velit molestias. Vitae sint quisquam nihil omnis occaecati. Et quis temporibus aspernatur enim nihil facilis optio. Dolore neque ipsum architecto quis. Atque aut non est voluptates dolores. Dolores aspernatur earum et maxime. Ut exercitationem ut sed rerum aliquid dolore. Praesentium esse amet excepturi velit eaque temporibus et. Dolore vitae laboriosam doloremque rem vel aut veniam blanditiis. Et minima culpa hic eveniet. Sit in sint minus. Laborum est ipsa fugit cum aut voluptates.

        
<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: Vel quod eos labore.

H2: Neque provident ex enim id eos repellat eum pariatur.

H3: Facere consequatur rem accusantium illo et.

H4: Ab reprehenderit officia id quia velit non aut.

H5: Qui impedit totam sequi voluptatum enim mollitia iure.
H6: Et sunt nemo velit velit laudantium.

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 itaque at ex totam impedit sit harum.
                
<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