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 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 useclass="callout-50"or any of thesize-percent-x"classes.
- Callouts are 100% width by default. Add
- 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 addclass="ignore"to prevent this.
- JavaScript adds