Card Grids

To wrap multiple <Card> or <LinkCard> components in a grid, use the<CardGrid> component.

Preview

Stars

Sirius, Vega, Betelgeuse

Moons

Io, Europa, Ganymede

Import

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

Usage

Group cards

Display multiple <Card> components side-by-side when there’s enough space by grouping them using the <CardGrid> component.

MDX

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>

Markdoc

{% 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 %}

Preview

Check this out

Interesting content you want to highlight.

Other feature

More information you want to share.

Group link cards

Display multiple <LinkCard> components side-by-side when there’s enough space by grouping them using the <CardGrid> component.

MDX

import { LinkCard, CardGrid } from '@astrojs/starlight/components';

<CardGrid>
  <LinkCard title="Authoring Markdown" href="/guides/authoring-content/" />
  <LinkCard title="Components" href="/components/using-components/" />
</CardGrid>

Markdoc

{% cardgrid %}
{% linkcard title="Authoring Markdown" href="/guides/authoring-content/" /%}

{% linkcard title="Components" href="/components/using-components/" /%}
{% /cardgrid %}

Preview

Authoring Markdown

Components

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.

MDX

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>

Markdoc

{% 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 %}

Preview

Check this out

Interesting content you want to highlight.

Other feature

More information you want to share.

<CardGrid> Props

Implementation: CardGrid.astro

The <CardGrid> component accepts the following props:

stagger

type: boolean

Defines whether to stagger the cards in the grid or not.