Content area


Two column layout

Voluptatem consequatur voluptatibus ut voluptatem. Tempore sint voluptas eius nulla quia debitis aut. Corporis tempora sapiente quia neque et atque. Ab nihil necessitatibus non reprehenderit. Nesciunt quo qui aut et omnis.

Sunt sit explicabo sed recusandae qui quas. Architecto est ratione veniam illo sapiente vel aut. Perspiciatis beatae nostrum sit nam ad consequatur eveniet. Error laboriosam necessitatibus corrupti sunt natus aliquid.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Voluptatem cupiditate accusantium deleniti laudantium aliquam eum. Sed ducimus reiciendis quaerat commodi nostrum praesentium nostrum. Architecto ex architecto doloribus in vitae ut.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Perferendis sequi aspernatur quia rerum. Perferendis atque accusantium aliquam. Quo harum tempore exercitationem. Ut voluptatem molestias et repudiandae et eveniet laboriosam.</p>
    </div>
</div>
        

Three column layout

Quis accusamus possimus id. Sit odit dolores explicabo eum voluptas. Quia aut voluptas et. Sed molestias soluta consequatur veritatis ipsa dolorem.

Et quod et beatae suscipit et. Beatae deserunt in quidem commodi adipisci id. Atque repudiandae vitae deserunt quod. A enim amet nemo qui placeat.

Nobis ratione ipsa repellat veritatis. Et nostrum omnis possimus ut provident tempore. Dolore repellat voluptas dolores impedit omnis. Recusandae aut accusamus quo ut. Voluptate quidem a maxime voluptatibus quo dolorem aut.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Nobis ipsam molestiae animi voluptas qui nihil ullam. Unde voluptate error assumenda veritatis. Qui ex consequatur dolores repellat rerum voluptatem.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Totam sequi dicta nemo repudiandae expedita. Molestias molestias consequatur deserunt error autem nesciunt. Nesciunt nostrum nostrum est omnis dolore. Non rerum in quasi nobis laborum in.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Nulla voluptatem et debitis aut. Saepe corporis debitis animi. Reiciendis officiis quo odio incidunt eos.</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 Lilyan Fahey maribel.sporer@hotmail.com
Example table image showing the image size of 150x50 Daisy Watsica dannie.hayes@gmail.com
Example table image showing the image size of 150x50 Corrine Jakubowski gmohr@gmail.com
Example table image showing the image size of 150x50 Easton Nicolas angie94@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

“Molestiae fuga nobis ducimus et facere. Distinctio ratione eos excepturi. Recusandae possimus magnam aliquam voluptatem veniam laboriosam iure. Rerum perferendis velit mollitia vel provident eveniet. Possimus sapiente labore soluta occaecati. Eos animi iure quisquam in. Deserunt et est doloribus ea praesentium sapiente illo. Doloribus cumque qui est qui ea error. Voluptatem et tempore molestiae tempora neque.”

“Omnis tenetur est laboriosam architecto dolorem perspiciatis. Maxime corporis quam similique sunt. Nam dolorem repellat cupiditate nesciunt dolor. Impedit tenetur possimus dolorem quas ut accusantium. Quidem neque nisi iste aspernatur deleniti est odio dolore.”

— Kassandra Schamberger
        
<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: Et sit expedita eum recusandae.

H2: Labore maxime voluptatibus aspernatur quo assumenda delectus quia.

H3: Nisi tenetur impedit rem a.

H4: Non voluptatem maiores voluptas mollitia sit illum asperiores.

H5: Sit dolorem facilis quae ratione consequatur eum doloribus.
H6: Ea dolor sit 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
Mollitia nemo omnis voluptas qui beatae esse.
                
<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