Announcement callouts
About this component
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 for Announcement callouts
None by default. If using a 50% width callout, it stretches to 100% width on small screens.
How to use for Announcement callouts
Use the with class="bulletin".
Development info for Announcement callouts
Stylesheet location:
/_source/homepage/styles/_cards.scss
To make the callout 50% width and align it to the right, see 50% width callouts.
<div class="bulletin card-50"> <!-- card-50 is ideal --> <h4>Callout heading</h4> <!-- or <h5> or <h6> --> <p>Callout content</p> </div>
Example of Announcement callouts
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.