GC Design SystemComponents
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Card
<gcds-card>

Also called: tile, content card. A card is a navigational container with structured content on a single topic.
  • GitHub
  • Figma

Card component preview

Card anatomy

  • The container holds all of a card’s elements.
  • 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.
  • The image (optional) is a 1:1, 16:9, or 4:3 ratio visual.
  • The headline is a short attention-grabbing title about the card’s content.
  • 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