Banner

Banner Integrated

A horizontal call-to-action banner with an optional icon and up to two CTA buttons.

Overview

BannerIntegrated is a horizontal call-to-action banner with caption, heading, subline, an optional icon, and up to two CTA buttons. On mobile the layout stacks vertically; from MD+ the icon sits left of the copy and the buttons hug the trailing edge.

Both CTAs render as BackgroundAwareButton, so they pick up standard button variants (primary, secondary, and so on). Apply .radius-contained on a padded parent to round corners inside a container.

Key Business & UX Benefits

A single banner pattern carries promotional copy plus up to two CTAs, so editors do not need to choose between a single heavy button and dropping the secondary path.
The icon-plus-copy pairing keeps the promo visually light, fitting into content rows without overpowering the surrounding editorial.
Surface-tone-aware chrome reads against light and dark backdrops alike, so the same banner ships across themed sections.
Icon, copy, and CTA edits land through Studio, freeing marketing teams to refresh promos on their own cadence.

Pro-Tip from Larry: Reserve the secondary CTA for the lower-commitment option (for example, "Learn more") so the primary stays the obvious next step.

Usage

LBannerIntegrated

Feature List

Caption, heading, subline, optional icon, and up to two CTA buttons in one horizontal banner
Mobile stacks vertically; MD+ lays the icon left of the copy with buttons hugging the trailing edge
Both CTAs render as BackgroundAwareButton, picking up standard variants such as primary and secondary
Surface-tone-aware chrome reads against light and dark backdrops
Studio-editable icon, copy, and CTAs so marketing teams refresh promos without dev work
Apply .radius-contained on a padded parent for rounded corners inside a container

API Reference

Prop	Default	Type
`heading`required		`string` Required main heading copy.
`headingColor`		`string` Optional override for the heading colour (CSS colour token or string).
`headingTag`	`h2`	`BannerIntegratedHeadingTag ("div" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6")` Semantic HTML element for the heading. Defaults to `h2`.
`subline`		`string` Optional subline beneath the heading.
`sublineColor`		`string` Optional override for the subline colour.
`caption`		`string` Optional small uppercase caption above the heading.
`captionColor`		`string` Optional override for the caption colour.
`icon`		`string` Optional icon rendered above the caption (mobile) / left of texts (MD+).
`backgroundColor`		`string` Solid background colour. Falls back to a pale theme tint when unset.
`primaryCta`		`CtaBannerButton { text, link, size, 3 more }` Optional primary call-to-action button. Rendered first in the actions row.
`secondaryCta`		`CtaBannerButton { text, link, size, 3 more }` Optional secondary call-to-action button. Rendered next to the primary CTA.
`backgroundImage`		`Media`
`backgroundImageSizes`		`string`
`surfaceTone`		`SurfaceTone ("dark" \| "light" \| "bright")`
`overlay`		`ImageContrastOverlayProps { variant, opacity }`

Edit this pageorReport an issue

Banner Basic

A foundational call-to-action banner with background imagery, headline, subline, and configurable action button.

Banner Showcase

A side-by-side promotional banner pairing a media image with a copy block and a single CTA.