C34 Inline media CTA

The Inline Media CTA component allows users to display a series of slim, clickable cards featuring an image or icon, headline, and supporting text to guide users to key content or actions.

 

Component requirements

Component consists of a wrapper element, along with individual inline media card blocks (C34).

Inline media CTA wrapper

Required:

• Headline type: H2/H3/H4/P. Default. P.
• Content alignment: Left/center. Defines how wrapper content is aligned (headline, copy, cta). Default: Center.
• Background color: White smoke/White. Default: White smoke.
• Number of columns: 1/2/3. Default: 2.

Optional:

• Wrapper headline: Text field. Allows users to add a headline which appears as first element inside the wrapper.
• Wrapper support copy: Rich text field. Allows users to add additional content, positioned just below headline
• Wrapper bottom support copy: Rich text field. Allows users to add additional content, positioned below the card elements
• Wrapper CTA button: Text field along with associated link type (internal/external/anchor/email/phone).

 

Inline media CTA card block

Required

• Headline: Text field.
• Support copy: Rich text field.
• CTA: Text field along with associated link type (internal/external/anchor/email/phone).
• Image/Icon: Either an image or an icon needs to exist. Default: Icon.
• Headline type: H3/H4/P. Default: P.
• Border: True/false. Defines if the card has a visible border around it. Default: False.
• Hide asset on mobile:True/false. Defines if image/icon is shown or hidden below 600px width. Default: False;
• Elevation (card shadow): Elevation1/Elevation2/Elevation3/None. Default: Elevation 1.

Optional

• Icon: Dropdown. Allows users to choose icon they would like to include.
• Icon size: Small/large. Default: Small.
• Image: Visual asset positioned within the card, to the left of the copy.

 

Additional component notes:

• Inline Media CTA cards are strictly used with a single call-to-action (CTA).
• Card image will be display at 96x96.
• Card icon can be displayed at 96x96 (large) or 32x32 (small)

 

ADA requirements:

• Images and icons that are purely decorative should be hidden from screen readers; if they convey meaning, include appropriate alternative text.
• CTA should have descriptive, helpful link text instead of generic phrases like "Read More" or "Learn More"
• Text should be readable by screen readers and structured semantically.

 

Component examples

Example #1: Wrapper includes title (headline/h2), top and bottom support copy,as well as CTA,all enabled. Wrapper includes singular row of cards with 3 columns and white smoke background. Cards are not linked, configured with image, headline (h3), support copy. Cards are configured with a shadow.

 

Example #2: Wrapper includes title (headline/h3) along with top support copy, on a white background. Configured with 2 cards per row, with 4 cards total. Cards are linked, configured with a large icon, headline (h3), support copy. Cards are configured with a border.

 

Example #3: Wrapper includes title only (headline/h3) on a white smoke background, and is configured with 3 cards per row. Cards contain a small icon, headline (p), support copy. Variety of card options are enabled (border, shadow, none).