Karten

Um Inhalte in einer Box anzuzeigen, die den Stilen von Starlight entspricht, verwende die Komponente <Card>.

Vorschau

Monde

Io, Europa, Ganymed

Import

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

Verwendung

Zeige eine Karte an, indem du die Komponente <Card> verwendest und einen title für die Karte angibst.

MDX

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

<Card title="Schau dir das an">
  Interessante Inhalte, die du hervorheben möchtest.
</Card>

Markdoc

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

Vorschau

Schau dir das an

Interessante Inhalte, die du hervorheben möchtest.

Hinzufügen von Symbolen zu Karten

Füge ein Symbol in eine Karte ein, indem du das Attribut icon auf den Namen eines von Starlights eingebauten Symbolen setzt.

MDX

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

<Card title="Sterne" icon="star">
  Sirius, Wega, Betelgeuse
</Card>

Markdoc

{% card title="Sterne" icon="star" %}
Sirius, Wega, Betelgeuse
{% /card %}

Vorschau

Sterne

Sirius, Wega, Betelgeuse

Karten gruppieren

Zeige mehrere Karten nebeneinander an, wenn genügend Platz vorhanden ist, indem du sie mit der Komponente <CardGrid> gruppierst. Siehe die Anleitung „Karten gruppieren“ für ein Beispiel.

<Card>-Eigenschaften

Implementation: Card.astro

Die Komponente <Card> akzeptiert die folgenden Eigenschaften:

title

Erforderlich
Typ: string

Der Titel der anzuzeigenden Karte.

icon

Typ: string

Eine Karte kann ein icon-Attribut enthalten, das auf den Namen eines von Starlights eingebauten Icons gesetzt ist.