C20 CTA content card

The CTA content card is a versatile component that can be displayed as a card or as a flat element. It includes an optional image that can be positioned above the content, followed by text and a CTA, making it adaptable for various promotional or informational purposes.

Component requirements

Component consists of a wrapper element, along with individual card elements.

Content card wrapper

Required:

• Title type: H2/H3/H4/P. Default: P.
• Content alignment: Left/center. Default: center.
• Number of columns: Dropdown. 1/2/3/4/C24-Location cards. Default: 2.
• Background color: Dropdown. White/White Smoke. Default: White.
• Enable dropshadow: Checkbox. Allows row to display as flat element or card style. Default: unchecked.

Optional:

• Headline: Text field.

• Top support copy: Rich text field. Positioned between the top headline and card row, allows users to add additional context or supporting information. 

• Bottom support copy: Rich text field. Positioned below the row of cards, allows users to add additional context or supporting information. 

• Bottom CTA: Text field along with associated link type (internal/external/anchor/email/phone. Allows to add an overarching CTA which will appear as the last element within the wrapper.

Content card

Required:

• Title type: H2/H3/H4/P. Default: P.
• First CTA style: Dropdown. Button/link. Default: Button.
• Second CTA style: Dropdown. Button/link. Default: Button.
• CTA alignment: Dropdown. Left/center. Default: Left.

Optional:

• Headline: Text field.
• Body copy: Rich text field.
• First CTA: Text field along with associated link type (internal/external/anchor/email/phone)
• Second CTA: Text field along with associated link type (internal/external/anchor/email/phone)
• Third CTA: Link. Text field along with associated link type (internal/external/anchor/email/phone)
• Card Image: Visual element positioned as the first element within a card.

Additional component notes:

• For best results, use 2 or more card in a row.
• Recommended image size: 500x250, webp, 300kB or under. 
  •  Please note, that depending on the column setting (1/2/3/4) and device, image will automatically fill within given space

Content guidance

Use this component when you have support copy for both the overall topic and each subtopic.

• Copy is brief, active direction
• Use at most three columns on pages with left nav or right rail. Four columns may be used on full-width pages.
• Choose White background color when a more open look suits the topics in the cards. Choose White Smoke background color for topics that need accent or separation from rest of the page.
• Example
  • Customized employee health solutions – together, in one place

Headlines (optional)

• Up to 40 characters
• Specify H2 or H3 to avoid default P formatting

Support copy above and below (optional)

• Use complete sentence between header and CTA.
• Keep copy length consistent (e.g., all short, all long)

CTA button copy

• Use sentence case.
• CTAs should be descriptive and clear what action users should take. Don’t use general phrases such as “click here” or “read more.”
• CTAs should be kept to 30 characters or fewer.

ADA requirements

• CTA needs to have descriptive link text (other than 'read more')
• Images need to have an alt text attached to them (unless being used as decorative)

Component examples

Example #1: CTA Content card component with white smoke background, and 2 column configuration. Card drop shadow is enabled. Content alignment set to left. Wrapper headline and support copy disabled. Card headline and support copy enabled. All (Individual cards as well as wrapper) CTA's disabled.

Example #2: CTA Content card component with white background, and 3 column configuration. Card drop shadow is enabled. Content alignment set to left. Wrapper headline as well as support copy are enabled. Card headline, support copy and CTA are all enabled. The wrapper bottom copy and CTA are enabled.

Example #3: CTA Content card component with white smoke background, and 4 column configuration. Card drop shadow is disabled. Content alignment set to center. Wrapper headline and support copy (top and bottom) enabled. Card headline and support copy enabled. Cards using link style for CTAs.