Callouts

We use callouts to highlight important or interesting information on a page. They can also direct users to other areas of the website. Each have specific uses, colors and locations.

Development info

  • Stylesheet location: /source-v6/styles/components/_callouts.scss
  • Callout widths and columns:
    • Callouts are 100% width by default. Add class="callout-50" to make them 50% width (see extras).
    • Callouts on small screens are always 100% width.
    • Callouts in the sidebar are always 100% width.
    • Callouts in div class="callout-columns" are always 100% the width of their respective column. When creating a callout gallery, never use class="callout-50" or any of the size-percent-x" classes.
  • Callout JavaScript:
    • JavaScript adds class="callout" to all callouts to make styling them easier.
    • JavaScript also adds div class="callout-contents" around everything below the main heading, used in styling.
    • JavaScript adds class="callout-heading" to the first heading in any callout type. This makes it easy to make the callouts look consistent no matter their heading level.
    • JavaScript adds all the necessary Foundation Equalizer attributes to class="callout-columns". This makes the columns the same height. You can add class="ignore" to prevent this.