Uses

On the School of Medicine site, call-out boxes are used as an aside from the main content or to highlight an important fact or feature related to the content on the page. Typically, call-out boxes will include a heading, a few sentences, and a link.

Styles

Call-out boxes are best identified by its rounded box. A 10px rounded border is used for the boxes, and they are given a stroke of 1px #ddd. For the body of the content box, an h2 title is used, followed by a p tag, and a normal link tag.

Examples

The above is an example found on the Diversity page of the School of Medicine site. The callout box here highlights an important antodote related to the main content - that Washington University School of Medicine is ranked as one of the best schools for Diversity - followed by a link to the article.

This example is found on the History page of the School of Medicine. This particular call-out box highlights the history of Washington University in St. Louis, but not particularly the Medical School. While important information that will enhance the content on this page, it offers a brief summary and allows the user to find out more by linking to the page on the main campus website.

Code

HTML
<div class="callout"> <h2>Tradition of excellence</h2> <p>Over the course of its first 150 years, Washington University has made remarkable progress, growing from a college educating local men and women to an internationally known research university with students and faculty from approximately 110 countries.</p> <p><a href="https://wustl.edu/about/history-traditions/">Read the history of Washington University in St. Louis »</a></p> </div>
CSS
.callout { *behavior: url( /wp-content/themes/medicine/_/js/boxsizing.htc ); box-sizing: border-box; border: 1px solid #ddd; background: #fff; margin: 0 0 20px; width: 100%; clear: both; float: left; border-radius: 10px; padding: 20px; } .callout h1, .callout h2, .callout h3 { margin-top: 0; } .callout div { line-height: 28px; } .callout ul.bulleted-ul { list-style: disc; } .callout .alignleft { margin: 2px 20px 20px 0; } .callout p:last-child { margin-bottom: 0; }