Web services

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 that is related to the page but isn’t part of the page’s core content.

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.

Development info
  • Stylesheet location: /_source/styles/components/_callouts.scss
  • In WordPress, use the callout shortcode.
  • <div class="highlight">
  • 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.
  • If including an image, use <img class="alignright size-percent-25">.
  • 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>

Highlight callout example

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