Call-To-Action

Description

The CTA component displays one or more prominent links.

  • Alignment Options: center, wide, full
  • Color Themes: light, dark, white, crimson, lavender, skyblue, 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 – 16:9

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

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

3 assets – 3:4 x 3
1 asset – 16:9 Fixed (Photo); 16:9 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- 16:9 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 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 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

id: CB-002-002-01
data-region: cb__cta__large__button

Explore in Storybook

with Link list, 1 asset, and no theme

id: CB-002-002-02
data-region: cb__cta__large__linklist

Explore in Storybook

with Button, no assets, and theme

Explore in Storybook

Small Text Style

with Link list and 3 images

id: CB-002-001-01
data-region: cb__cta__small__linklist

Explore in Storybook

with Button and 2 images

Explore in Storybook

with Button and 1 video

Explore in Storybook

with Button and no assets

id: CB-002-001-02
data-region: cb__cta__small__button

Explore in Storybook