Cards

To display content in a box matching Starlight’s styles, use the <Card> component.

Import

import { Card } from '@astrojs/starlight/components';

Usage

Display a card using the <Card> component and provide a title for the card.

Add icons to cards

Include an icon in a card using the icon attribute set to the name of one of Starlight’s built-in icons.

Group cards

Display multiple cards side-by-side when there’s enough space by grouping them using the <CardGrid> component. See the “Group cards” guide for an example.

<Card> Props

Implementation: Card.astro

The <Card> component accepts the following props:

title

required
type: string

The title of the card to display.

icon

type: string

A card can include an icon attribute set to the name of one of Starlight’s built-in icons.