Usage guidelines
Calls-to-action
An arrow will automatically appear on CTA buttons, but not on links.
Unique calls-to-action
For more information on the importance of unique CTAs and how to write effective button, link, and CTA text, refer to Anatomy:
Image card
Use a vertical card to represent sections of content that may or may not have a link to another page to view more information. For example, use a card to represent a news article.
The Teaser card image is fluid. The image will scale proportionally to fill 100% of the width of the component. The width of the component can be adjusted through responsive authoring.
- Default
- Accent
- Assertive
- Ghost
- Subtle
The default style removes any color background on the card and only uses black text. Consider the default style when there are a lot of cards on the page. Only use default style on light backgrounds.
The accent style adds an accent color to the text block. Use this style to add some color to the page or emphasize the vertical card's content.
The assertive style adds an assertive color to the text block. Use this style to add some color to the page or emphasize the vertical card's content.
The ghost style removes any color background on the card and only uses ghost text. Consider the ghost style when there are a lot of cards on the page. Only use ghost style on dark backgrounds.
The subtle style adds a subtle color to the text block. Consider the subtle style when there is a limited amount of cards on the page.
Icon card
The icon replaces the image in this style. The icon has a set width of 64px. The icon image must be an SVG. For more information, refer to the Accessibility section.
- Default
- Accent
- Assertive
- Ghost
- Subtle
The default style removes any color background on the card and only uses black text. Consider the default style when there are a lot of cards on the page. Only use default style on light backgrounds.
The accent style adds an accent color to the text block. Use this style to add some color to the page or emphasize the vertical card's content.
The assertive style adds an assertive color to the text block. Use this style to add some color to the page or emphasize the vertical card's content.
The ghost style removes any color background on the card and only uses ghost text. Consider the ghost style when there are a lot of cards on the page. Only use ghost style on dark backgrounds.
The subtle style for vertical card adds a border and padding to to the card content. Consider the subtle style when there is a limited amount of cards on the page.
Without an image
If a card appears without an image, a bar will appear above the card content. The top bar will animate on hover or focus of any actionable item within the card. If this card type is combined with the interactive treatment, the interactive treatment will override the top bar. Do not combine with interactive treatment.
- Default
- Accent
- Assertive
- Ghost
- Subtle
The default style removes any color background on the card and only uses black text. Consider the default style when there are a lot of cards on the page. Only use default style on light backgrounds.
The accent style adds an accent color to the text block. Use this style to add some color to the page or emphasize the vertical card's content.
The assertive style adds an assertive color to the text block. Use this style to add some color to the page or emphasize the vertical card's content.
The ghost style removes any color background on the card and only uses ghost text. Consider the ghost style when there are a lot of cards on the page. Only use ghost style on dark backgrounds.
The subtle style adds a subtle color to the text block. Consider the subtle style when there is a limited amount of cards on the page.
Optional treatments
The decorative treatment should be used to emphasize the teaser’s content. Do not overuse decorative treatments.
- Pretitle styles
- Interactive treatment
- Shadow treatment
Add a pretitle when the teaser content can be grouped into a recognizable content category. The pretitle has three style options: default, assertive, and accent.
When typing in the pretitle text, do not capitalize the text. Screen readers will read each letter out by itself, instead of reading the word. The pretitle style will automatically transform the text to uppercase.
Default pretitle
Assertive pretitle
Use the assertive style to highlight the content category. Do not overuse the assertive pretitle style.
Accent pretitle
Use the accent style to bring a pop color to the content. Do not overuse the accent pretitle style.
The interactive treatment will add an animated bar to the card when the user hovers or focuses on the title or call-to-action link. Apply this treatment to emphasize the card's action. Do not combine this treatment with cards without images.
Apply the shadow treatment to the default card if also applying the interactive treatment. The shadow will give the default card a visible edge to appear on.
There are four color options to choose from to apply to the interactive treatment:
The shadow treatment will add a light dropshadow to the card. Apply this treatment to emphasize the card. Adding this style to the default card will add inner padding to the text block content.
