Cards
To display content in a box matching Starlight’s styles, use the <Card> component.
Moons
Io, Europa, Ganymede
Import
Section titled “Import”import { Card } from '@astrojs/starlight/components';Display a card using the <Card> component and provide a title for the card.
import { Card } from '@astrojs/starlight/components';
<Card title="Check this out">Interesting content you want to highlight.</Card>{% card title="Check this out" %}
Interesting content you want to highlight.
{% /card %}Check this out
Interesting content you want to highlight.
Add icons to cards
Section titled “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.
import { Card } from '@astrojs/starlight/components';
<Card title="Stars" icon="star">
Sirius, Vega, Betelgeuse
</Card>{% card title="Stars" icon="star" %}
Sirius, Vega, Betelgeuse
{% /card %}Stars
Sirius, Vega, Betelgeuse
Group cards
Section titled “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
Section titled “<Card> Props”Implementation: Card.astro
The <Card> component accepts the following props:
required
type: string
The title of the card to display.
type: string
A card can include an icon attribute set to the name of one of Starlight’s built-in icons.