Card Grids
To wrap multiple <Card> or <LinkCard> components in a grid, use the<CardGrid> component.
Stars
Sirius, Vega, Betelgeuse
Moons
Io, Europa, Ganymede
Import
Section titled “Import”import { CardGrid } from '@astrojs/starlight/components';Group cards
Section titled “Group cards”Display multiple <Card> components side-by-side when there’s enough space by grouping them using the <CardGrid> component.
import { Card, CardGrid } from '@astrojs/starlight/components';<CardGrid> <Card title="Check this out" icon="open-book"> Interesting content you want to highlight. </Card> <Card title="Other feature" icon="information"> More information you want to share. </Card></CardGrid>{% cardgrid %}{% card title="Check this out" icon="open-book" %}Interesting content you want to highlight.{% /card %}{% card title="Other feature" icon="information" %}More information you want to share.{% /card %}{% /cardgrid %}Check this out
Interesting content you want to highlight.
Other feature
More information you want to share.
Group link cards
Section titled “Group link cards”Display multiple <LinkCard> components side-by-side when there’s enough space by grouping them using the <CardGrid> component.
import { LinkCard, CardGrid } from '@astrojs/starlight/components';<CardGrid> <LinkCard title="Authoring Markdown" href="/guides/authoring-content/" /> <LinkCard title="Components" href="/components/using-components/" /></CardGrid>{% cardgrid %}{% linkcard title="Authoring Markdown" href="/guides/authoring-content/" /%}{% linkcard title="Components" href="/components/using-components/" /%}{% /cardgrid %}Stagger cards
Section titled “Stagger cards”Shift the second column of the grid vertically to add visual interest by adding the stagger attribute to the <CardGrid> component.
This attribute is useful on your home page to display your project’s key features.
import { Card, CardGrid } from '@astrojs/starlight/components';
<CardGrid stagger>
<Card title="Check this out" icon="open-book">
Interesting content you want to highlight.
</Card>
<Card title="Other feature" icon="information">
More information you want to share.
</Card>
</CardGrid>{% cardgrid stagger=true %}
{% card title="Check this out" icon="open-book" %}
Interesting content you want to highlight.
{% /card %}
{% card title="Other feature" icon="information" %}
More information you want to share.
{% /card %}
{% /cardgrid %}Check this out
Interesting content you want to highlight.
Other feature
More information you want to share.
<CardGrid> Props
Section titled “<CardGrid> Props”Implementation: CardGrid.astro
The <CardGrid> component accepts the following props:
stagger
Section titled “stagger”type: boolean
Defines whether to stagger the cards in the grid or not.