Portland Community College | Portland, Oregon Portland Community College


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

Development info

  • Stylesheet location: /_source/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.