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. H2.
  • 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).
  • Headline type: H3/H4/P. Default: H3.
  • 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;
  • Card shadow: True/false. Default: False.

Optional

  • Icon: Dropdown. Allows users to choose icon they would like to include.
  • Icon size: Small/large. Default: Large.
  • 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: Full wrapper includes title (headline/h2), top and bottom support copy all enabled. Wrapper includes 3 cards per row, with 6 cards total. Cards are configured with image, headline (h3), support copy.

 

Example #2: Full wrapper includes title (headline/h2), top and bottom support copy all enabled. Wrapper includes 3 cards per row, with 6 cards total. Cards are configured with small icon, headline (h4), support copy.

 

Example #3: Full wrapper includes title (headline/h2). Top and bottom support copy are disabled. Bottom CTA is enabled. Wrapper includes 2 cards per row, with 4 cards total. Cards are configured with large icon, headline (h4), support copy. Card border is enabled.