Link-Karten

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

Vorschau

Starlight anpassen Lerne, wie du deine Starlight-Website 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.

MDX

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

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

Markdoc

{% 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.

MDX

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

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

Markdoc

{% linkcard
   title="Internationalisierung"
   href="/de/guides/i18n/"
   description="Konfiguriere Starlight zur Unterstützung mehrerer Sprachen." /%}

Vorschau

Internationalisierung Konfiguriere Starlight zur Unterstützung mehrerer Sprachen.

Gruppiere Link-Karten

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.