Banner
Banner is a full-width content block used to drive attention to a specific product, page, offer, or key update.
When to use
Section titled “When to use”- Promote a single message full-width across a page or container, such as a callout, campaign, or featured story.
- Pair an image or video with text to add visual context to a promotional message (media banner).
- Highlight one message so it stands out from surrounding content.
When not to use
Section titled “When not to use”- Don’t grid multiple text or media banners to display multiple parallel callouts. Use a text card or media card instead.
- Don’t stack two horizontal banners on one page. If stacking media banners, alternate the left and right layout between them.
Choosing a variant
Section titled “Choosing a variant”- Use a text banner when the message does not need supporting media.
- Use a media banner when an image or video adds meaning to the message.
Layout
Section titled “Layout”Banner always takes up 100% of the width of its container or page.
Banner is in a vertical layout on sm and md breakpoints. On lg and xl breakpoints it’s in a horizontal layout.
The media banner includes left and right layout variants to allow for vertical stacking of multiple banners.
Media ratios
Section titled “Media ratios”The media banner uses the Media component, which offers multiple aspect ratios. Choose a ratio to design compact or tall layouts.
Background color
Section titled “Background color”Banner defaults to a primary background. Use a secondary background to highlight the banner content or make it stand out from the surrounding page.
The text banner uses a secondary background by default, since it has no supporting media to draw attention on its own.