Kartenraster

Um mehrere <Card> oder <LinkCard> Komponenten in einem Raster zu verpacken, verwende die Komponente <CardGrid>.

Vorschau

Sterne

Sirius, Wega, Betelgeuse

Monde

Io, Europa, Ganymed

Import

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

Verwendung

Karten gruppieren

Zeige mehrere <Card> Komponenten nebeneinander an, wenn genügend Platz vorhanden ist, indem du sie mit der <CardGrid> Komponente gruppierst.

MDX

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

<CardGrid>
  <Card title="Schau dir das an" icon="open-book">
    Interessante Inhalte, die du hervorheben möchtest.
  </Card>
  <Card title="Anderer Inhalt" icon="information">
    Weitere Informationen, die du weitergeben möchtest.
  </Card>
</CardGrid>

Markdoc

{% cardgrid %}
{% card title="Schau dir das an" icon="open-book" %}
Interessante Inhalte, die du hervorheben möchtest.
{% /card %}

{% card title="Anderer Inhalt" icon="information" %}
Weitere Informationen, die du weitergeben möchtest.
{% /card %}
{% /cardgrid %}

Vorschau

Schau dir das an

Interessante Inhalte, die du hervorheben möchtest.

Anderer Inhalt

Weitere Informationen, die du weitergeben möchtest.

Link-Karten gruppieren

Zeige mehrere <LinkCard> Komponenten nebeneinander an, wenn genügend Platz vorhanden ist, indem du sie mit der <CardGrid> Komponente gruppierst.

MDX

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

<CardGrid>
  <LinkCard title="Markdown verfassen" href="/de/guides/authoring-content/" />
  <LinkCard title="Komponenten" href="/de/components/using-components/" />
</CardGrid>

Markdoc

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

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

Vorschau

Markdown verfassen

Komponenten

Karten staffeln

Verschiebe die zweite Spalte des Rasters vertikal, um es optisch interessanter zu gestalten, indem du das Attribut stagger zur Komponente <CardGrid> hinzufügst.

Dieses Attribut ist auf deiner Homepage nützlich, um die wichtigsten Merkmale deines Projekts anzuzeigen.

MDX

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

<CardGrid stagger>
  <Card title="Schau dir das an" icon="open-book">
    Interessante Inhalte, die du hervorheben möchtest.
  </Card>
  <Card title="Anderer Inhalt" icon="information">
    Weitere Informationen, die du weitergeben möchtest.
  </Card>
</CardGrid>

Markdoc

{% cardgrid stagger=true %}
{% card title="Schau dir das an" icon="open-book" %}
Interessante Inhalte, die du hervorheben möchtest.
{% /card %}

{% card title="Anderer Inhalt" icon="information" %}
Weitere Informationen, die du weitergeben möchtest.
{% /card %}
{% /cardgrid %}

Vorschau

Schau dir das an

Interessante Inhalte, die du hervorheben möchtest.

Anderer Inhalt

Weitere Informationen, die du weitergeben möchtest.

<CardGrid>-Eigenschaften

Implementation: CardGrid.astro

Die Komponente <CardGrid> akzeptiert die folgenden Eigenschaften:

stagger

Typ: boolean

Legt fest, ob die Karten im Raster gestaffelt werden sollen oder nicht.