Callout Box
Callout Boxes can highlight special announcements, highlighted information, or detailed
instructions. They appear as gray boxes within the main content area. They can contain
formatted text, including headings, paragraph text, lists and links, as well as images.
How to create a Callout Box
- Place the cursor on your page where you want the Callout Box.
- Click on the Snippet icon in your tool bar (it looks like a puzzle piece), then choose
Callout Box.
- Edit the Callout Box as needed.
- Advanced: For coding, use the following container for the callout (container should not be a
<p> or <div> element):
<section class="grey-highlight-box" aria-label="Callout">...</section>
Example
Dolor elementum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse leo nunc, pellentesque
mattis euismod et, elementum ut erat. In ut nisi vel quam porttitor sollicitudin nec
eget nibh. Donec rutrum eleifend enim. Sed rutrum eros erat, sed venenatis orci fermentum
sed.
Duis a dolor elementum, aliquet est vitae, sollicitudin nibh. Vestibulum laoreet tortor
velit, quis hendrerit mi pellentesque id. Proin congue lectus quis mauris egestas
malesuada. Etiam varius lorem ac risus eleifend, ac congue dui mollis.
Guidelines for emergency information
When posting information about emergency closures or other updates, please use a callout
box at the top of your page, and follow these additional guidelines:
- For time-sensitive announcements, it is strongly recommended that utilize scheduled
publishes to remove time-sensitive information after it expires.
- Start the announcement with a date stamp so users know when the information was posted.
- Keep the information simply stated and direct.
- Avoid repeating information that is available through Harper's main emergency communications
or routine college closure alerts, which appear at the top of every web page when
in effect.
- Link to the College's alert site (harpercollege.edu/alert) for the latest information, if applicable.
