Card

Cards present content with calls to action in a concise yet engaging style. Cards are usually part of a collection or list of previews of similar content. The card is never presented in isolation.

There are two types of cards available, including Media Card and Icon Card. 

Card Groups  can display either icon cards or media cards. Please note that only one type of card can be used within a single content group. Card Groups should always contain a minimum of two cards. Consider using another component if you only need to highlight a single item.

Media Card

The Media Card component can be used in many different page types. The default design includes media, a heading and a call to action, and optional extras include tags and body copy. By adding and removing optional content, the card offers a wide range of design possibilities.

Card images are built to fill the width of the card and proportionally scale the height of the images. It is recommended to use the 16:9 image ratio for media.

Icon Card

Icon Cards feature an Icon Object paired with a Heading, Body copy and call to action. Icons provide a lot of visual interest and can enhance the overall look of the page. They can support the user experience when paired with content that has common visual associations. However, keep in mind that meanings of icons can differ heavily across cultures, and so they should be selected and used carefully.

Icon Cards can have a vertical or horizontal icon orientation. 

Examples of icon cards in both vertical and horizontal orientations

Media Card

1. Media: Can be an image or a video.

2. Tag: Add categories or special callouts to each card.

3. Heading: Heading has the highest information hierarchy on a card, and should be succinct and descriptive.

4. Body copy: Optional body copy can be added for additional descriptions. Text will truncate after three lines by default.

5. CTA link: Can be used along with an icon to give more context. Alternatively, a right-arrow icon can be substituted for the CTA Link.

Icon Card

1. Icon Object - icon placed above or to the left of the card title.

2. Heading: Heading has the highest information hierarchy on a card, and should be succinct and descriptive.

3. Body copy: Optional body copy can be added for additional descriptions. Text will truncate after five lines by default.

4. CTA: Can be either a CTA Link (see Media Card example above) or right-arrow icon. 

Always horizontally align cards within a group from the left to the right side of the screen. The height of the largest card in a group will determine the height for all cards. When the horizontal space is limited, stack them vertically, while preserving their original order. 

Mouse Interactions

Card containers are static, except for buttons or links.

Call to Action (CTA)

A label must be authored for all CTAs, however, the label can be visually-hidden. When a right arrow-icon is used as the CTA, the visually-hidden label should match the card title. The label will be a nested <span>with a cmp-link__screen-reader-onlyclass nested within the<a>element containing the CTA.

<a href="https://www.pa.gov/" target="_blank" class="cmp-cardcontent-containercta">

<span class="cmp-link__screen-reader-only">Commonwealth of Pennsylvania</span>

<span class="cmp-link__screen-reader-only">(opens in a new tab)</span>

</a>

Headings

The card title must have configurable heading levels (h2- h6).

Images

Images which convey additional information (and are therefore not decorative)  must have a meaningful, accurate alternative text description that is equivalent to the visual information being communicated.

Icons and Tags

Icons should be decorative and not communicate meaning. Meaning should be conveyed through tags-actual text. If using an icon, the icon should be chosen to reinforce the card’s purpose, as indicated by the title.

Specific keyboard interactions will depend on the type of card you are using and what content it contains but all types of cards can take focus.