Content area


Two column layout

Libero doloremque ipsa accusamus enim quod voluptatem ipsa. Aliquam provident maxime sed aliquam architecto et quia. Voluptate sed non natus est quia sit est.

Consequatur voluptas velit est delectus veritatis. Laudantium delectus rem esse veniam ab. Dolor et quis iure eos tempora et. Nisi quasi distinctio sunt aliquid.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Repellat est cupiditate repellendus in. Dolorum non et labore dolorem reprehenderit ut. Est culpa officiis maiores voluptas recusandae ad vero. Accusantium dolorum consequatur deserunt qui ullam eligendi consequatur. Explicabo illo ipsa at consequuntur numquam id fugit laborum.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Et rerum delectus suscipit incidunt eos quasi eum. Sequi assumenda dignissimos voluptatem voluptas sunt. Dolorem placeat vero quo inventore veniam necessitatibus ullam quidem. Ut ut mollitia impedit maxime.</p>
    </div>
</div>
        

Three column layout

Nobis sunt vel corrupti autem velit. Mollitia ex et vel provident ipsam nemo culpa. Quia eum sint aspernatur ut illo. Magnam ipsam sit voluptatem aliquid.

Autem et rerum molestias et. Ut sed eligendi ad tenetur iste. Dolor aut et commodi similique nobis dolores ipsa. Itaque aut voluptatem aut rem nemo consequuntur.

Expedita sunt odit omnis velit. Ea in quo nihil ut fugiat. Esse enim tenetur totam expedita ut dolorem minima officia. Voluptatem inventore nisi minus et iusto.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Voluptate dolorem voluptatem sint quae quibusdam. Atque voluptatem dolorem suscipit. Blanditiis excepturi officia et et. Odit unde ab suscipit qui omnis qui assumenda.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Est labore a iste vel. Fuga sed quo cumque ex. Magni quibusdam autem veniam nemo voluptas. Amet quo quaerat eveniet quia autem.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Nam omnis porro inventore unde. Tempore ut sint suscipit voluptatem. Dolores dolores odit provident.</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 Ubaldo Boyer pboehm@powlowski.com
Example table image showing the image size of 150x50 Beaulah Schinner hudson.cedrick@blick.com
Example table image showing the image size of 150x50 Eda Hansen jromaguera@volkman.com
Example table image showing the image size of 150x50 Leonel Abernathy crawford.crist@murphy.biz
        
<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

“Ratione assumenda voluptatem molestiae ex quae inventore. Sed ut sit ipsa. Facilis dignissimos sunt ipsa dolores id magni. Corporis molestiae cum corrupti consequatur et dolorum cumque. Corrupti nemo sit deserunt rem tempore odit. Repellendus consequatur et natus enim. Consequatur aut rerum tenetur neque occaecati eius expedita laboriosam. Exercitationem debitis quos sit. Dolores autem et tempora ad sit in aut officiis. Quidem accusantium dignissimos repudiandae ab at architecto minus.”

“Non dicta provident velit corporis minus. Sunt neque deleniti sint. Porro veritatis quam alias aliquid qui perspiciatis ut.”

— Margarete D'Amore
        
<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: Qui voluptates minima necessitatibus non officia dolorum.

H2: Ipsum numquam ut est odio atque.

H3: Inventore non et unde atque ea.

H4: Asperiores ipsa quam ut animi necessitatibus et.

H5: Laborum neque occaecati ut alias quibusdam.
H6: Sed rem qui maxime repellat est qui eos.

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
Architecto perferendis minima magnam alias aut fuga laboriosam.
                
<figure>
    <img src="/styleguide/image/400x300" alt="">
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
</figure>
                
More options

Colors

Lightest green #acc9c0
Lighter green #71a192
Light green #3d7a67
Base green #0c5449
Dark green #093f39
Darker green #072e29
Darkest green #05211e
Lightest yellow #fff2c9
Lighter yellow #ffe596
Light yellow #ffdb6f
Base yellow #ffcc33
Dark yellow #d8ad2d
Darker yellow #ae8f30
Darkest yellow #866e26
White #ffffff
Lightest grey #f2f2f2
Lighter grey #e6e6e6
Light grey #d9d9d9
Base grey #babfbf
Dark grey #949999
Darker grey #575959
Darkest grey #323333
Black #181a19