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