Icon & CTA Card 2up

Use Cases:

• Use this pattern near the end of a page to promote related content or guide users to the next step in their journey.
• Content should be relevant to the page topic and provide a clear reason for users to continue exploring.

Guidelines:

Context is so important with these cards. Content managers absolutely must choose an icon that relates to the destination/subject of the card. Meet accessibility requirements by providing link text that lets users know what to expect when they follow the link (avoid generic CTAs like “Learn More” or “Read More”). Repeating the headline is fine (“More information about [headline]”), but creativity is also welcome.

• Icon: choose an icon that relates to the headline and description copy. The icon should provide additional context for the user.
• Headline: 5-10 words.
• Description: 20–40 words.
• CTA/Button: Avoid generic CTAs like “Learn more” or “Read more.” The user should have a clear understanding of where the link will take them and what they can expect to find. 
  

Avoid:

This pattern should not be stacked on top of each other. It should be used toward the bottom of a page as a way to highlight additional resources, frame the content, and highlight next steps for users.

Accessibility:

1. Provide alt text for the icon. The “how-to” for this is different from providing alt text for images. In the icon & text banner accessibility field, we recommend including descriptive alt text for icons in the Label field.
2. Write link text carefully to provide context for users regarding the link destination.

Dependencies:

There are no dependencies for this pattern. It does not have to be used in conjunction with another.

Compatibility:

This component is supported by Safari 14.1, Chrome 84, Edge 84, Firefox 63, and later versions of these browsers.

Image Dimensions:

This pattern uses a predefined set of icons created by OCM. When using this pattern, select an icon from the approved library to ensure consistency with the overall brand and design system.