Structure

The attention card pattern is customizable to a number of scenarios and should use the design that will create the optimal experience. All cards in one collection should have the same basic layout and component parts.

The only required elements within a container are the title and body content. The optional elements listed below provide additional information and visual prominence where necessary.

• The container creates the barrier for the card information. It separates a card from other in a collection or, if standalone, from the rest of the elements on the page.
• An image or yellow border bar may be used as a spotlight to draw attention to a card on a busy page. Do not use both an image and a border bar.
• The eyebrow text is used to give secondary or supporting information. Eyebrows use the title 4 text style.
• The Title details what is contained in the card body. Titles use the title 2 text style.
• Body content expands on the card title and uses the default text content variation.
• Attention cards may have up to two associated actions in the form of buttons and links. An attention card may only use a primary button if it offers the primary action on the page. Otherwise, cards with two actions must use a horizontally stacked default button and text link.

Variants

Eyebrow Text

Header

Card body content is concise and immediately relevant to the card's header.

Action 1Action 2Action 3

Standard

The standard card is offered in the DSM with removable pieces so that each card can be customized to best suit your design. The card container will respond as components are added and removed. Because of the amount of content within them, a complete standard card is not easily scannable and should rarely be used in collections.

Eyebrow Text

Header

Card body content is concise and immediately relevant to the card's header.

Action 1Action 2

Hero

The hero variant of the attention card is a larger, horizontal card that has all possible component parts. The image in a hero variant is more prominent as it takes up 50% of the container width. Hero cards are only used as standalones and may only be used at desktop breakpoints. At smaller breakpoints, they convert to standard cards.

Design Environment

Card containers are flexible and margins should adapt to the card size. Use more spacing in between attention cards and layout elements around them.

Microcopy

Because of the space restraints inherent in cards, copy should be concise. The relationship between a card's body content, optional eyebrow, title and image should be immediately apparent. Follow the microcopy guidelines in title, buttons and links for more information.