Web services

Announcement callouts

Use announcement callouts on timely messages and important, temporary information. They ideally shouldn’t contain more than about 50 words and can include optional links to other pages.

Announcement callouts are different from other types of callouts because they:

  • Highlight important, timely, and temporary information.

Styling

Announcement callouts have orange headings. They are generally 50% width and aligned to the right, but don’t have to be. They are never located in the sidebar.

Responsive behavior

None by default. If using a 50% width callout, it stretches to 100% width on small screens.

Development info
  • Stylesheet location: /_source/styles/components/_callouts.scss
  • In WordPress, use the callout shortcode.
  • <div class="bulletin">
  • To make the callout 50% width and align it to the right, use class="callout-50" in the HTML or align="right" in the WordPress shortcode – see extras.
  • <div class="bulletin callout-50"> <!-- they're usually 50% width -->
  <h4>Callout heading</h4> <!-- whichever heading level is needed -->
  <p>Callout content</p>
</div>

Announcement callout example

Office closure

The Enrollment Office will be closed on September 19 for In-service.

This is paragraph text that is aligned to the left. The 50% width callout is aligned to the right, and the text wraps around it. If the text is taller than the 50% width callout, it will stretch the full width of the page beneath the callout.