Cards

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

Preview

Moons

Io, Europa, Ganymede

Import

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

Usage

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

MDX

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

<Card title="Check this out">Interesting content you want to highlight.</Card>

Markdoc

{% card title="Check this out" %}
Interesting content you want to highlight.
{% /card %}

Preview

Check this out

Interesting content you want to highlight.

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.

MDX

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

<Card title="Stars" icon="star">
  Sirius, Vega, Betelgeuse
</Card>

Markdoc

{% card title="Stars" icon="star" %}
Sirius, Vega, Betelgeuse
{% /card %}

Preview

Stars

Sirius, Vega, Betelgeuse

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.