Web services

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 callout shortcode with class="bulletin".

欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment 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 callout-50"> <!-- callout-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.