Check this out
Interesting content you want to highlight.
To wrap multiple <Card>
or <LinkCard>
components in a grid, use the<CardGrid>
component.
Display multiple <Card>
components side-by-side when there’s enough space by grouping them using the <CardGrid>
component.
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 %}
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>
PropsImplementation: CardGrid.astro
The <CardGrid>
component accepts the following props:
stagger
type: boolean
Defines whether to stagger the cards in the grid or not.