Official website

of the Commonwealth of Pennsylvania

Components

Card

A card provides information about linked resources in a structured format. A card can include an image or icon. Cards always appear as part of a group.

Overview

A card uses style and formatting to draw attention to its contents. Each card is part of a card group; a card should never be displayed alone.

You can customize cards to fit your content. A card must include a title, description, and link. You can also include an image, an icon, a date, and tags.

Usage

When to use

  • Use cards to present a group of similar links while differentiating the links from one another. For example, you might use cards to share featured locations that have distinctive features or descriptions.
  • Consider using cards with tags when you have a large collection of links that fit into categories, topics, or separate audiences.
  • Add a date field when links are timely. This could include dated blog posts or upcoming events.
  • Cards can also organize frequently used resources or documentation.

When not to use

  • When you don’t have a compelling image or useful icon for each item. Consider using the list group component instead.
  • When you want to feature content, but don’t have a link destination. Consider using an image or icon object alongside text instead.
  • When you only have one card. Cards are designed for use in groups.

Accessibility

Provide meaningful link text. If using an image in your card, include alt text.

Related components

We want to hear from you

This is a pre-release version of Keystone Design System. If you're a beta tester, we want your bug reports, questions, and feedback.

 

Complete our form to share your thoughts—just log in with your PA.gov email. We'll review and consider every response.