Card
<gcds-card>

Also called: tile, content card.

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

• GitHub
• Figma

Build a card

Use cards to help a person discover and scan summaries or progressive, bite-sized bits of related information.

Write a scannable card title

Use the card-title attribute to add a short and descriptive title to the card.

Select the correct heading level

Set the card-title-tag to define the correct heading level for the card title. While the font size remains the same regardless of the tag, setting the correct heading level maintains proper hierarchy and accessibility for assistive technologies.

Add a description to provide more information

To provide more information on the card's topic, add a description to the card:

• Use the description attribute to provide a concise text description.
• For a description with more complex formatting, like bold or italics text, use the card's default slot. Avoid adding any interactive elements into the slot, as they ‌can cause accessibility issues. The card itself is already interactive and will take the person to the correct location.

Use a badge to show the status or category of a card

• Use the badge attribute to add a status or a category to the top left corner of the card.
• 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 multiple 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.

Use valid properties

Component properties have built-in validation. Required properties or properties prone to misuse will be validated. If there are any validation errors, the component will be non-functional and won't render. Review the browser's console for details and adjust the properties accordingly to ensure proper functionality.

Get your code

Generate an instance of the component you need by selecting its code properties.

1. Explore by choosing different code values to generate the instance you want.

2. Get the code and pull it into your environment.

3. Add any copy you need to the component (like text for a label).

Note: The code builder uses English for all code elements, which follows standard practice.