Content area


Two column layout

Dolor illum qui molestias nisi reiciendis voluptas. Eos qui nesciunt sint. Sunt ipsa eveniet aspernatur.

Facilis quas eveniet minus dignissimos iusto nobis. Quisquam commodi rerum fuga itaque. Ducimus qui perspiciatis iure vel mollitia. Iste et fugit illum pariatur magni deserunt impedit.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Sit eos asperiores impedit nam reiciendis modi. Quia velit minima deserunt autem non aut. Ipsam rerum fuga maiores non quisquam fuga. Qui quod voluptate a tempora totam ut perspiciatis. Et vel sequi eos et explicabo.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Sequi voluptas quo omnis modi minima at eius. Atque odit ullam voluptates suscipit doloremque maxime. Consequuntur nesciunt quis ad tempore dolores blanditiis sapiente. Iste aut aut maxime.</p>
    </div>
</div>
        

Three column layout

Voluptates est quibusdam architecto commodi ipsam nostrum. Consectetur aut placeat voluptatem expedita placeat. Deserunt harum nihil et et ab et ducimus. Perferendis nam et et nostrum non iure ut cumque.

Tenetur eos ut error. Voluptatibus quos aut dolorem. Sint aut similique error et sit aliquam.

Et illo ut inventore quod ipsam. Iure magni quidem culpa quaerat sunt molestiae aspernatur. Cumque nobis qui vel natus velit totam qui sed.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Et quidem inventore omnis accusantium est. Velit occaecati voluptate repellendus ab. Sunt consequatur sint delectus ut odit.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Quis necessitatibus ipsum sunt sit ut aut quia quis. Facere nulla animi est itaque voluptatibus. Ullam eveniet in exercitationem et. Ut voluptatem et rerum velit molestiae veritatis.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Est consequuntur voluptates voluptatem mollitia dignissimos. Ducimus aliquam culpa sunt suscipit dolor ducimus iste qui. Ducimus eligendi fuga dolorem ea quam est. Accusantium dolores quasi neque quia ea.</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 Jules Stroman sharon.mertz@hotmail.com
Example table image showing the image size of 150x50 Abner Smith feil.roxane@gmail.com
Example table image showing the image size of 150x50 Marlee Gutkowski nhackett@watsica.biz
Example table image showing the image size of 150x50 Grayce Mueller dorothy24@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

“Doloremque blanditiis dolorem in quisquam nulla quia odio. Iusto minus perferendis soluta quia quis ad rerum voluptas. Minima blanditiis quia blanditiis. Fuga nemo quia aperiam quos id sit. Est corporis doloremque vitae voluptatem nihil repellat. Eos optio occaecati et rerum. Rerum eos fugit omnis animi voluptates rem. Necessitatibus qui debitis libero dolores maxime ut. Dolores distinctio placeat omnis et voluptatum adipisci ut. Eum voluptas voluptates beatae quidem. Impedit velit est commodi. Qui consequuntur totam neque soluta. Et recusandae voluptas dolorem quia facere nobis est sapiente.”

“Nobis cupiditate aut aut ratione placeat expedita ullam. Laudantium id tempore eos qui. Rerum quos dolorem expedita aliquam quia sint quia. Ducimus itaque qui dolores. Vitae maxime omnis id eos odit nihil.”

— Moriah Eichmann
        
<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: Ducimus illo qui ut qui rem repudiandae.

H2: Aut totam accusamus id qui.

H3: Perferendis omnis doloribus eum aut illum eveniet architecto.

H4: Magni rem praesentium molestias non.

H5: Quam possimus enim dignissimos animi dolorem.
H6: Voluptatem est cumque qui.

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
Nihil et doloremque sed tenetur.
                
<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