Portland Community College | Portland, Oregon Portland Community College

Highlight callouts

Use highlight callouts to highlight interesting facts, testimonials or other information related to the page. Their content shouldn’t be necessary or part of the core content.

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

  • display information related to the page, but not part of the page’s core content
  • can be located in the sidebar

Development info

  • Stylesheet location: /source-v6/styles/components/_callouts.scss
  • In WordPress, use the callout shortcode
  • div class="highlight"
  • class="callout-50" – optional, see extras
  • use a blockquote when creating a testimonial highlight callout
  • <div class="highlight">
      <h4>Callout heading</h4> <!-- whichever heading level is needed -->
      <p>Callout content</p> <!-- either regular content -->
      <blockquote>Quote text <cite>Quote citation</cite></blockquote> <!-- or a quote -->
    </div>

Styling

Highlight callouts have green headings. They are generally 50% width and aligned to the right, but don’t have to be. They can be located in the sidebar or in the main content area.

Responsive behavior

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

Testimonial

This is a quote in a testimonial callout. Highlight callouts are great for testimonials. You can put them in the main content area or in the sidebar.

Person who said the quote