Zum Inhalt springen
Starlight

Link-Karten

Um Links zu verschiedenen Seiten prominent anzuzeigen, verwende die Komponente <LinkCard>.

Vorschau
Starlight anpassen Lerne, wie du deine Starlight-Site mit deinem Logo, eigenen Schriftarten, Landing-Page-Design und vielem mehr zu deiner eigenen machen kannst.

Import

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

Verwendung

Zeige einen Link mithilfe der Komponente <LinkCard> deutlich sichtbar an. Jede <LinkCard> erfodert ein title und ein href-Attribut.

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


<LinkCard
  title="Inhalte in Markdown verfassen"
  href="/de/guides/authoring-content/"
/>
Vorschau
Inhalte in Markdown verfassen

Füge eine Linkbeschreibung hinzu

Füge einer Link-Karte mit dem Attribut description eine kurze Beschreibung hinzu.

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


<LinkCard
  title="Internationalisierung"
  href="/de/guides/i18n/"
  description="Konfiguriere Starlight zur Unterstützung mehrerer Sprachen."
/>
Vorschau
Internationalisierung Konfiguriere Starlight zur Unterstützung mehrerer Sprachen.

Zeige mehrere Link-Karten nebeneinander an, wenn genügend Platz vorhanden ist, indem du sie mit der Komponente <CardGrid> gruppierst. Ein Beispiel findest du im Handbuch “Gruppiere Link-Karten”.

<LinkCard>-Eigenschaften

Implementation: LinkCard.astro

Die Komponente <LinkCard> akzeptiert die folgenden Eigenschaften sowie alle anderen <a>-Elementattribute:

title

Erforderlich
Typ: string

Der Titel der anzuzeigenden Link-Karte.

href

Erforderlich
Typ: string

Die URL, auf die bei Interaktion mit der Karte verwiesen werden soll.

description

Typ: string

Eine optionale Beschreibung, welche unter dem Titel angezeigt wird.