Content area


Two column layout

Consequatur provident soluta voluptate sequi. Et occaecati mollitia nobis eaque. Tempora omnis quod eius iusto.

Ut nostrum velit maiores incidunt. Illo pariatur rerum eius nam autem molestias consequatur. Illo quibusdam dolor fugiat ea.

            
<div class="row -mx-4 md:flex">
    <div class="md:w-1/2 px-4">
        <p>Voluptatem cupiditate eveniet ratione laboriosam. Quae magnam sit dicta. Cupiditate beatae enim natus non sunt.</p>
    </div>
    <div class="md:w-1/2 px-4">
        <p>Laboriosam eius in dolor ut. Pariatur natus dolores quo eligendi. Aperiam enim cumque eius eum rerum qui enim. Quia nostrum voluptatem autem beatae.</p>
    </div>
</div>
        

Three column layout

Non et ut laborum expedita blanditiis tempore. Maiores repellendus nobis animi quidem voluptas error et maiores. Quo possimus rerum sit architecto necessitatibus. Atque aliquid ducimus repudiandae dolores nihil quidem doloremque.

Aut possimus sint facilis animi iure molestiae hic. Reprehenderit consequuntur aut temporibus repellat sunt est. Voluptas non architecto corporis voluptas laudantium eveniet. Fuga praesentium consequatur voluptas consequuntur aut consectetur omnis molestiae. Ad consequatur optio natus quia quidem inventore nam.

Nulla rerum ut consequuntur est earum quis. Tenetur dignissimos non molestiae voluptatem reprehenderit. Illo voluptas iusto non nisi voluptates quibusdam et quam.

            
<div class="row -mx-4 lg:flex">
    <div class="lg:w-1/3 px-4">
        <p>Quo officiis nihil omnis aut. Consequatur tempora soluta ipsam et culpa delectus officiis et. Natus autem nesciunt iste quisquam voluptatem excepturi voluptas. Voluptas facilis voluptates hic non.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Voluptatem eius molestiae fugit qui quo nemo. Praesentium molestiae quod dolorem pariatur nam id qui. Ea maxime et molestiae deleniti eos. Dolorum sed doloribus vel.</p>
    </div>
    <div class="lg:w-1/3 px-4">
        <p>Dolorum voluptas doloribus fuga placeat molestiae praesentium. Quos mollitia modi vero tempora debitis et. Sit velit corrupti repudiandae dicta alias eaque. Voluptates et minus vero commodi sit magni.</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 Summer Schamberger marta.oconnell@yahoo.com
Example table image showing the image size of 150x50 Kolby Goyette cassandra64@hotmail.com
Example table image showing the image size of 150x50 Hope Howell parker.carlee@yahoo.com
Example table image showing the image size of 150x50 Camryn Dickens jessica41@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

“Deleniti optio dolorum veritatis dolore vitae explicabo eligendi. Asperiores qui rerum ipsam eius similique animi molestiae. Non distinctio deserunt molestiae dolorem enim repellendus. Est qui tempore dolorem a totam qui laborum. Id distinctio sapiente ratione voluptas. Repellendus amet aut id aut quam eius. Non et iure et qui.”

“Hic perferendis ad eum illum eos sapiente autem. Harum et architecto voluptates debitis aut assumenda illo. Inventore aspernatur aperiam qui cumque ut nam.”

— Prof. Leonora Barrows
        
<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: Vero odit qui sunt quisquam.

H2: Est nesciunt quo tempore eveniet dolor.

H3: Sit ipsum harum earum facere fuga.

H4: Optio quis nisi et excepturi recusandae porro vitae.

H5: Eum a corporis rerum nostrum veniam quia nihil.
H6: Voluptatem voluptatem inventore aperiam rerum quaerat explicabo explicabo.

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
Exercitationem accusantium et expedita nisi vel laboriosam eveniet.
                
<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