---
title: Breakout banner
description: Use a breakout banner to break up content on longer pages and highlight important information.
keywords: ['banner', 'promo', 'callout', 'attention', 'highlight']
---

Use breakout banners to promote important information and actions in-between blocks of content.
Whereas the CTA banner is intended to redirect users to their respective conversion outlets, links in the breakout banner should only cross-link to supporting content.

## Anatomy

## Usage

Breakout banners should be used in the middle of a page to break up long blocks of content. Avoid using the breakout banner at the beginning or towards the end of a page.

**✅ Do**

_Use breakout banners to break up longer pages._

**❌ Don't**

_Don't use the breakout banner too early or late in the page (E.g. near the footer). Prefer CTA banner in case of
the latter. Also avoid placing the breakout banner too close to related components like the CTA banner._

### Alignment

The breakout banner content can be aligned to the start or center of the parent element, with the former being the default. Use the center alignment if context calls for it.
E.g. Use center alignment if the breakout banner is placed between two sections that are also centered aligned to avoid breaking the visual flow.

**✅ Do**

_Use start alignment when possible._

**❌ Don't**

_Don't use start alignment when adjacent content is center aligned._

### Use sparingly

Breakout banners should be used sparingly, at most once per page. This is to avoid diluting the impact of the spotlighted content or links in the context of the wider page.

**✅ Do**

_Use breakout banner sparingly._

**❌ Don't**

_Don't stack multiple breakout banners, prefer Bento instead._

### Use concise headings

Both heading and optional descriptions in the breakout banner should be short and focussed. Heading should be not be longer than 3 lines, and description should be no longer than 3-4 lines.

**✅ Do**

_Use concise, but impactful heading and description text._

**❌ Don't**

_Don't use longer form content in the heading or description. Consider using Bento as an alternative._

### Background visuals

Background images should be abstract and low fidelity to not compete with the foreground text.

**✅ Do**

_Use approved wallpapers that provide space and contrast with the foreground text._

**❌ Don't**

_Don't use images of people's faces, real objects, etc._

### Leading visuals

**✅ Do**

_Use logos or icons that are related to the adjacent banner content._

**❌ Don't**

_Don't use decorative imagery as a leading visual. Use the background image to apply decoration._

**✅ Do**

_Use monochrome colors, which correspond to the text color of the current, active color mode._

**❌ Don't**

_Don't use full color visuals._

## Accessibility

- Ensure proper color contrast between text and background
- Make sure leading visuals include proper aria labels
- Use semantic heading elements with appropriate heading levels
- Ensure links have descriptive text that makes sense out of context

## Related components

- [CTABanner](../CTABanner/index.md): To highlight important information and actions towards the end of a page
- [Bento](../Bento/index.md): For more complex layout needs when presenting multiple content blocks
