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.
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.
None by default. If using a 50% width callout, it stretches to 100% width on small screens.
- Stylesheet location:
- In WordPress, use the callout shortcode.
- 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
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.