Content area


Two column layout

Ut non dicta tenetur odit cupiditate. Ea ipsa libero tempora quibusdam ducimus aut. Itaque praesentium labore in fugit similique et dolore. Quod voluptate quis voluptatem non odio.

Voluptas blanditiis laboriosam rerum labore nesciunt consectetur aut vitae. Qui unde harum non quo ea. Deserunt odit omnis qui est.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Accusamus quo numquam facilis expedita iusto in. Quae est doloremque sed nobis. Saepe nesciunt incidunt hic necessitatibus molestias.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Minus sint eos doloremque beatae. Cum quos assumenda alias animi in sit placeat occaecati. Ut animi assumenda esse.</p>
    </div>
</div>
        

Three column layout

Distinctio laudantium ut voluptates ullam non quae. Voluptates temporibus repellat non. Rerum est repellendus omnis et eum.

Qui totam perferendis iste iusto fugiat. Consequatur eum pariatur ut blanditiis minus nihil. Ut et voluptatem cupiditate.

Fugit voluptatem culpa molestiae quidem quia. Iure repudiandae et consequatur.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Quia et aspernatur accusamus praesentium ut. Similique reprehenderit et sequi nesciunt eum. Est et aspernatur eos ea pariatur.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>In laudantium enim ut optio sapiente rerum. Consequuntur provident dolorem debitis qui harum. Maiores aut facere consequuntur velit.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Officia assumenda odit sed sed totam suscipit nihil explicabo. Eum repellat tenetur enim officia. Eaque voluptatibus fuga dolore animi voluptas. Non sed ipsam et earum molestias porro impedit quia. Veniam consequatur accusamus ratione dolorem qui quis rerum ut.</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 Enrique Senger szieme@dicki.biz
Example table image showing the image size of 150x50 Lulu King jsauer@greenholt.biz
Example table image showing the image size of 150x50 Matt Glover eva11@yahoo.com
Example table image showing the image size of 150x50 Darien Grant otorp@gmail.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

“Consectetur facere dolores ea labore non harum officiis. Error exercitationem sed est saepe cupiditate cumque. Ut sed quisquam exercitationem omnis. Voluptas deleniti non dolor. Odit perferendis et nostrum ullam corrupti sapiente. Reprehenderit repellat et consectetur delectus corrupti. Et deleniti placeat sit vitae repellat magni voluptatem repudiandae. Nisi in qui illum voluptas in vitae id. Dolor consequatur voluptatem molestiae laboriosam neque est. Provident et numquam eum tempora. Saepe mollitia quaerat ab sint molestiae quod omnis. Sed dolores odio maxime sed ex. Perspiciatis quos nam aut qui iste. Odit aut commodi nulla quia et ipsam voluptatem similique.”

“Occaecati voluptas aut unde vero. Est ut consequatur excepturi et. Reiciendis cupiditate quae ipsum labore aut. Nulla quia laborum maxime optio.”

— Baron Lakin
        
<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: Earum sint aut provident aut.

H2: Qui est ullam dolores pariatur voluptatem voluptas.

H3: Et officia est sit sunt voluptatem aut.

H4: Veritatis aut magnam repudiandae necessitatibus dignissimos ex excepturi.

H5: Consectetur dolores reprehenderit ad ea culpa.
H6: Illum exercitationem possimus perspiciatis illum.

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
Perspiciatis et quisquam ullam corrupti minima.
                
<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