İçeriğe geç
Starlight
Filters

    Card Grids

    Bu içerik henüz dilinizde mevcut değil.

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

    Preview

    Stars

    Sirius, Vega, Betelgeuse

    Moons

    Io, Europa, Ganymede

    Import

    Section titled “Import”
    import { CardGrid } from '@astrojs/starlight/components';

    Usage

    Section titled “Usage”

    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>
    Preview

    Check this out

    Interesting content you want to highlight.

    Other feature

    More information you want to share.

    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>
    Preview
    Authoring Markdown
    Components

    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>
    Preview

    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.