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 (phone/tablet/desktop), image will automatically fill within given space

Content guidelines

Lorem ipsum.
Lorem ipsum.

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 Smoke white 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.