Portland Community College | Portland, Oregon Portland Community College

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

Development info

  • Stylesheet location: /source-v6/styles/components/_callouts.scss
  • In WordPress, use the callout shortcode
  • div class="bulletin"
  • class="callout-50" – optional, 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>

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.

Office closure

The Enrollment office will be closed 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.