Base card

PATTERN OVERVIEW

Presented in groups of three, a base card serves as an entry point or preview of more detailed content found on another page. An image, heading, summary copy and call-to-action link is pulled together and presented in a digestible way. On mobile, the cards stack one above the other.

Usage 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.
• Overuse of the card can overwhelm users and diminish the important information on a page.
• The cards can be placed on light gray background color to set it apart from other content on the page.

AEM component: Use the "Card box" component added inside of a one-column control, set to 1080 px wide, to build this pattern. Set the card type to "Image CTA Cards."

Requirements

H3 heading (page title): Up to 40 characters max (including spaces)

Image size: 525 (w) x 225 (h) px JPEG or PNG when necessary

Summary copy: Up to 100 characters (including spaces)

Call-to-action: Maximum character count is 25 characters (including spaces). Select button or link style (note link style appears in all caps).

Type: For headings, use sentence case, no punctuation (unless necessary, such as a question mark). For body copy, use sentence case with complete and punctuated sentences.

Type alignment: Left aligned or centered