CTA Banner

Description

The CTA Banner component displays one or more prominent links.

  • Alignment Options: center, wide, full
  • Color Themes: light, dark, white, crimson, purple, blue, red, black
  • Visible Content Fields: title, subtitle, primary and secondary CTA links, images
  • Instances per Page: none to multiple

How it Works

  • Content editors select a large or small style and one or more links
  • Images are optional

Images

Aspect Ratio (recommended)Width (proportional)Height (proportional)Scaling Behavior
1 asset – 3:2

2 assets (mismatched heights) – 3:4 & 3:2

2 assets (same heights) – 3:4 x 2

3 assets – 3:4 x 3
1 asset – 3:2 Fixed (Photo); 3:2 Not Fixed (Video)*

2 assets (mismatched heights) – Fixed*

2 assets (equal heights) – 3:4 (See Notes)

3 assets – 3:4 Crops uniformly left and right
1 asset- 3:2 Fixed*

2 assets (mismatched heights) – Fixed*

2 assets (equal heights) – 3:4 (See Notes)

3 assets (See Notes)
1 asset – Scales down proportionately on mobile—does not crop.

2 assets (mismatched heights) – Scales down proportionately on mobile—does not crop.

2 assets (equal heights) – As width first narrows, height is fixed and images crop left and right equally.

At ~narrow tablet width, breaks to one (first) image and width is fixed and crops uniformly top and bottom.

3 assets – As width first narrows, height is fixed and images crop left and right equally.

At ~tablet width, breaks to (first) two images: height is fixed and width crops uniformly left and right (slightly more width shows on left and right of images than in 3 image view.)

At ~narrow tablet width, breaks to one (first) image: crops all sides – left and right uniformly; top and bottom uniformly.

*Images will auto-crop based on the limiting dimension.

Examples

Large Text Style

with Buttons, 2 assets, and theme

data-region: cb__cta__large__button

Explore in Storybook