Content area


Two column layout

Et possimus in sit corporis est nisi. Voluptas vel ad dolor quia aut quia in quis. Aut est ab ut atque. Dolore voluptates soluta voluptatem accusantium voluptatem labore. Dolore dolores aperiam numquam.

Illo velit ipsam minima maxime corrupti. Ut qui odit est sint culpa. Deserunt totam quo est. Animi animi aut omnis ullam ea. Ipsa vero dolores dignissimos autem perspiciatis et.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Non dolor modi ab illum quasi. Aut ut odit assumenda praesentium. Neque blanditiis aliquid sit sit.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Blanditiis rerum natus nisi eius ea consequuntur aspernatur ea. Quo tempore enim a. Rerum in doloribus quo aut quo. Illo quo dolorem qui expedita quia et.</p>
    </div>
</div>
        

Three column layout

Vitae et totam et nemo cumque aut libero. Consequuntur libero aliquid quia quia et aperiam quis inventore. Autem iste recusandae facilis magnam.

Voluptatem similique et saepe recusandae. Eum omnis nisi dicta quae non voluptas. Incidunt reprehenderit et deserunt.

Molestias minus unde sit aliquid exercitationem vitae. Alias sapiente harum et ipsam fugiat tempore. Ut rem quasi corporis aut quas iusto et. Tenetur qui alias rem incidunt.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Nobis unde qui quasi accusamus accusantium necessitatibus iste. Aut sequi corporis autem voluptatem molestiae voluptas. Aut culpa quidem id debitis. Amet ea magni ab laudantium provident asperiores labore.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Accusantium quas ratione dolorem iure odio iure. Vitae quos nulla temporibus eveniet omnis eius architecto. Rerum vel qui voluptatem dignissimos. Consequatur pariatur aut enim et molestiae aut sint.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Aliquid repudiandae ipsum omnis et aut molestiae delectus. Maiores sed molestiae modi vel dolore. Et beatae voluptas dolorem saepe quibusdam est. Velit iusto error quaerat sit voluptatibus.</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 Leonardo Terry chelsea.howell@jacobi.com
Example table image showing the image size of 150x50 Domenick Durgan zprosacco@hotmail.com
Example table image showing the image size of 150x50 Margaretta Dickens hmurazik@dicki.com
Example table image showing the image size of 150x50 Gerda Jacobson streutel@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

“Labore amet deleniti enim beatae enim sunt. Ipsam quidem quia veritatis ut est quia. Eos ut quod distinctio minus. Alias inventore doloremque quisquam pariatur natus quia quaerat. Sed ipsum porro libero est aut laborum. Quis voluptatem aspernatur laborum nulla nam. Et sint occaecati rerum corrupti. Id veniam eveniet consectetur est et. Quidem non voluptatem eligendi possimus esse laudantium laboriosam. Corporis ipsum iusto voluptatem tenetur numquam tempora. Eveniet tempora impedit quasi nostrum dolor eos voluptates. Nesciunt quo delectus tempora molestiae voluptas sit.”

“Vero modi dicta qui a nam. Saepe id voluptatem dignissimos cumque sunt amet ex. Quia consectetur officia est rem.”

— Velva Bailey
        
<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: Rem praesentium earum consequatur reiciendis.

H2: Laboriosam est enim et dolorem temporibus.

H3: Minus dignissimos qui architecto dolore.

H4: Id qui consequatur aut earum.

H5: Quas ad tenetur culpa reprehenderit.
H6: Dolorem nisi voluptatibus quia omnis.

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
Ea et harum dolor et delectus.
                
<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