Uses

Alerts are used on the School of Medicine homepage to highlight any important event that the reader should be aware of. Typically, these messages do not fall into a category on the webpage and are only to be displayed temporarily.

Styles

The alerts on the Washington University School of Medicine homepage are displayed in the Source Sans Pro font on a Teal Background (#2d837e).

Examples

In the above example, the alert displays directly underneath the hero banner in the header. Alerts are not displayed by default, however, once turned on they will integrate seemlessly into the layout of the webpage.

Code

HTML
<div id="alert-wrapper"> <div class="alert"> <p class="alert-text">You're invited: <a class="alert-url" href="https://medicine.wustl.edu/news/medical-campus-to-host-diversity-week/"><br /> Diversity Week is Sept. 10 - 14 on the medical campus »</a></p> </div> </div>
CSS
.home #page #alert-wrapper { background-color: #2d837e; padding: 20px 0; } .home #page .alert { color: #fff; margin: 0 auto; max-width: 940px; } .home #page .alert-text { font-size: 20px; font-weight: 400; line-height: 28px; padding-bottom: 15px; } .home #page .alert-text:last-child { padding-bottom: 0; } .home #page .alert-url { color: #fff; font-weight: 600; text-decoration: underline; } .home #page .alert-url:hover { color: #fff; }