Alert Boxes

Even though these stylized boxes are called alert boxes, they can be used to highlight any type of information (not just alerts).

The box will expand to accommodate the amount of text placed inside it.

Alert Yellow
Alert Red
Alert Green
Alert Blue
Alert Gray

 

Setting the Width to 100%

My Width is Set to 100%

In some case it looks nice to have the alert box span the entire content are.  To do this we set the width of the alert box to 100% (requires editing HTML):

  1. While editing the page with the alert box, click the HTML button on the visual editor.
  2. In the source code window that appears, find the <div> tag for the alert box that you want to modify
    <div class="alert alert-blue">My Width is Set to 100%</div>
  3. Add style="width:100%;" to the div tag so that it now looks like this:
    <div class="alert alert-blue" style="width:100%;">My Width is Set to 100%</div>
  4. Click Update, and Save the page.

 

Examples

The Department of Medicine

Alert Box Example 1

 

Carolina Geriatric Education Center (CGEC)

ButtonExample_10.png

 

Alternate Alert Box

An alternative way of highlighting important information is to add the information to a portlet in the 'header area that spans columns one and two and plus the content area'; such as the Department of Neurology did to highlight the relocation of their outpatient clinic.

Alert Box Example 2