GC Design System Components
Home Start to use Page templates overview Basic page Components overview Breadcrumbs Button Card Checkboxes Container Date input Date modified Details Error message Error summary Fieldset File uploader Footer Grid Header Heading Icon Input Language toggle Link Notice Pagination Radios Screenreader-only Search Select Side navigation Signature Stepper Text Textarea Theme and topic menu Top navigation CSS shortcuts overview Reset styles Responsive layout State Box sizing Container sizing Display Overflow Position Visibility Font Font family Font size Font style Font weight Line height Link colour Link size Link text decoration List style Text align Text colour Text overflow Text transform Word break Margin Padding Align content Align items Align self Flex Flex direction Flex grow Flex shrink Flex wrap Gap Grid columns Grid rows Justify content Justify items Justify self Order Place content Place items Place self Background colour Border colour Border radius Border style Border width Icon names Icon size Image Cursor Pointer events Transition Styles overview Design tokens Colour tokens Spacing tokens Typography tokens Contact us Get involved Find a demo

Card
<gcds-card>

Also called: tile, content card.

A card is a box containing structured, actionable content on a single topic.

  • GitHub
  • Figma

Card component preview

Card anatomy

  1. The container holds all of a card's elements.
  2. The badge (optional) is a visual indicator to inform users of the card's status or category. Badge text should be no more than 20 characters.
  3. The image (optional) is a 1:1, 16:9, or 4:3 ratio visual.
  4. The headline is a short attention-grabbing title about the card's content.
  5. The description (optional) has text that supports the card title. It may include a few lines of summary on the card's topic or a list of details about the same subject, like a list of event details.
A card anatomy represented by 5 elements: the container, the badge, the image, the headline, and the description.

Design and accessibility for cards

Write a scannable card title

  • Use a meaningful title to inform users of what they'll find on the card.
  • Choose a brief description or call-to-action statement for the title.

Choose what information to add to the card

  • Consider adding an image related to the title to make individual cards more identifiable.
  • Consider adding a description to provide more information about the card's topic.
  • Consider adding a badge to inform users of the status or the category of the card's content. Common examples of statuses include: "New", "Updated", "Coming soon" and "Featured". Common examples of categories include: "videos", "articles", "reports". The badges are customizable but are limited to 20 characters maximum.

Group cards for visual consistency

Organize cards within a grid component:

  • For desktop screens, use either 2 or 3 cards per row.
  • For mobile screens, use 1 card per row.
  • Try to include the same properties for each card within a section on a page. For example, if one card has an image, then all cards get an image.
Cards grouped in two rows. The first row contains 3 cards (4 grid columns per card). The second row contains two cards (6 grid columns per card).

Help us improve

Have questions or a request? Give feedback on our contact form.

Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others.

Give feedback Report an issue on GitHub
2024-12-11