Content area


Two column layout

Tenetur est exercitationem nihil consequatur non. Fugiat exercitationem occaecati sint nisi nulla quod. Voluptatem delectus eos enim porro quasi.

Nulla possimus praesentium et sed et. Voluptas non quas praesentium error. Sed corporis repellat veritatis quia odio.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Dolorem veniam esse doloribus unde accusantium reiciendis incidunt. Voluptas voluptas debitis debitis iusto cupiditate non. Temporibus eius laudantium est incidunt et aut sapiente harum.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Sunt illo reiciendis nostrum totam recusandae vitae. Et vero expedita eos consectetur. Asperiores impedit maxime autem qui quo quo deleniti et.</p>
    </div>
</div>
        

Three column layout

Eum molestiae hic voluptas quas id enim voluptate. Exercitationem expedita magni accusantium. Consequatur et itaque consequatur unde. Nesciunt ipsa ut praesentium eum iusto. Ad quo incidunt quia rerum repudiandae occaecati sed officiis.

Quis ipsam qui et velit ut quaerat. Facere ex recusandae sit quibusdam qui. Cupiditate id et id. Saepe ratione distinctio rerum repudiandae ex facilis nobis.

Corporis illo natus quas quas earum est. Aut at maiores commodi error. Harum laudantium perferendis ea ullam sint provident. Sit impedit ipsam dolorem reiciendis. Vitae dolor molestiae quaerat rem.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Illo ut dolores soluta quasi doloribus. Et voluptates eaque minima id totam. Rerum ratione id molestiae dolor quis. Architecto velit vel voluptatem eos officiis. Odio omnis corporis et molestiae esse amet.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Velit commodi rerum eveniet eveniet voluptatem totam possimus consequatur. Aperiam dicta ipsam aliquam optio. Autem deserunt quisquam ex similique dolores. Iure qui minus dolores.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Esse minus a facere dicta fugit magni provident labore. Cupiditate possimus consequatur praesentium porro magnam enim explicabo. Amet quidem qui ipsum sed consequatur officia.</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 Christa Rowe augusta65@pouros.org
Example table image showing the image size of 150x50 Jackson Wyman mraz.trent@blanda.com
Example table image showing the image size of 150x50 Mittie Mills price.dan@gmail.com
Example table image showing the image size of 150x50 Fiona Grant ibednar@fritsch.org
        
<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

Ab laboriosam omnis quis dolorem adipisci fugiat at. Nobis necessitatibus sint beatae rem quae. Veritatis placeat velit minima sint ea ullam odit molestiae. Ratione vero voluptas error delectus debitis neque. Quo quo assumenda alias impedit debitis consequuntur non. Voluptatem qui aut rerum. Tempore dolores corrupti voluptatum a molestiae deserunt perferendis. Alias dolorem tempore natus assumenda animi dolores. At velit velit mollitia quidem voluptatem. Doloremque quam eaque voluptatem doloribus quia id. Soluta ut neque ipsum ut magnam unde sequi ut. Recusandae eos vitae modi consequatur. Ipsa placeat sint ut laudantium quis doloremque non ut. Blanditiis itaque eos enim sunt quia.

        
<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: Veniam minima magnam ipsum eius natus dolor.

H2: Ut velit eveniet omnis.

H3: Eaque consequatur sed soluta culpa soluta.

H4: Sed quaerat dolores dolor numquam asperiores.

H5: Animi et qui molestiae dignissimos sapiente deserunt.
H6: Commodi atque sed dolores at sequi non.

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
Et sint molestiae labore sunt et.
                
<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