Breakout

Breakouts are content highlight features that works like an information box for important content.

Shape

Breakout variations

There are several width and background variations:

  1. Grey content width.
  2. White content width.
  3. Image content width.
  4. Grey page width.
  5. White page width.
  6. Image page width.
  7. Grey screen width.
  8. Image screen width.

Content width with grey background

This breakout variation is used most frequently across the website. It fits inside the 8 column content area and is a useful way to highlight important content.

Optional button

Content width with white background

This breakout variation is used as a secondary option when a grey version already exists on the same page of content. It fits inside the 8 column content area and is a useful way to highlight important content.

Optional button

Content width with image background

This breakout variation is used sparingly. It was used as an advertising feature on the previous iteration of the website, but has since been replaced with other marketing elements.

Optional button

Page width with grey background

This breakout variation is used on full width pages or at the bottom of a page below the scrollspy breakpoint. It's 12 columns wide so fits outside the standard content area.

Optional button

Page width with white background

This breakout variation is used very sparingly on full width pages or at the bottom of a page below the scrollspy breakpoint. It's 12 columns wide so fits outside the standard content area.

Optional button

Page width with image background

This breakout variation is used sparingly. It was used as an advertising feature on the previous iteration of the website, but has since been replaced with other marketing elements.

Optional button

Screen width with grey background

This breakout variation is used at the bottom of the page at the top of the footer. It's typically used as a call to action for newsletter subscriptions or other conversion based actions.

Optional button

Screen width with image background

This breakout variation is used sparingly. It was used as an advertising feature on the previous iteration of the website, but has since been replaced with other marketing elements.

Optional button