Albuquerque Public Schools
Wells and Callouts
Use boxes to callout important pieces of information, like contact information, or an important deadline. Use sparingly, ranging from 1 to 2 times on a single page.
Wells
Blue Well
Used for the Contact Us boxes, or for highlighting sections on a page.
Source Code: <div class="well-blue"> </div>
Grey Well
Grey wells are use for highlighting sections on a page.
Source Code: <div class="well-grey"> </div>
Grey Snow
Grey wells are use for highlighting sections on a page.
Source Code: <div class="well-snow"> </div>
Callouts
Informational Callout
This is the preferred information callout box.
Source Code: <div class="callout callout-info">
Form Instructions Callout
Used on pages with forms, for the form instructions.
Source Code: <div class="callout callout-warning">
Danger Callout
This call out is used for items that are of extreme importance.
Source Code: <div class="callout callout-danger">
Success Callout
This callout is rarely used.
Source Code: <div class="callout callout-success">
Code Callout
Only used in the Web Team Style Guide for highlighting code examples.
Right Column Boxes
Avoid using. Difficult on mobile, and can create confusing reading order.