Goals and Solutions card

PATTERN OVERVIEW

The goals card serves as an entry point to a solution or goals page from a top tier page. A brand-approved icon, heading, summary copy and call-to-action button is pulled together and presented in a digestible way. On mobile, the cards stack one above the other.

Guidelines

• The heading is added above the cards using the "Text3" component — see samples below. A dash is added to the heading when it includes intro copy.
• Add icon using the icon picker built into the AEM component; however, if the image is not available in the picker, a 100 x 100 px PNG can be uploaded. 

AEM component: Use the "Expanding card box" component to build this pattern. Add the component to a one-column control (1280 px) and set background color to "none" to remove padding (space) from around the component.

Requirements

Card heading: Up to 45 characters max (including spaces). Use sentence case, no punctuation.

Summary copy: Up to 140 characters (including spaces). Use sentence case, with punctuation.

Call-to-action button: Maximum character count is 25 characters (including spaces).