Breakouts are content highlight features that works like an information box for important content.
Share
Breakout variations
There are several width and background variations:
grey content width
white content width
image content width
grey page width
white page width
image page width
grey screen width
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.
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.
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.
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.
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.
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.
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.
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.