Verwenden Sie Karten, um visuelle Container für Inhalte zu erstellen. Karten sind flexible Container, die Text, Symbole, Bilder und Links enthalten können.

​
Einfache Karte

Kartentitel

So verwendest du eine Karte mit Symbol und Link. Ein Klick auf diese Karte führt dich zur Seite Columns.
Card example
<Card title="Card title" icon="text" href="/components/columns">
  This is how you use a card with an icon and a link. Clicking on this card
  brings you to the Columns page.
</Card>

​
Kartenvarianten

Karten bieten mehrere Layout- und Stylingoptionen, um unterschiedlichen Inhaltsanforderungen gerecht zu werden.

​
Horizontales Layout

Fügen Sie die Eigenschaft horizontal hinzu, um Karten in einem kompakteren, horizontalen Layout darzustellen.

Horizontale Karte

Dies ist ein Beispiel für eine horizontale Karte.
Horizontal card example
<Card title="Horizontal card" icon="text" horizontal>
  This is an example of a horizontal card.
</Card>

​
Bildkarten

Fügen Sie eine img-Eigenschaft hinzu, um oben auf der Karte ein Bild anzuzeigen.
yosemite

Bildkarte

Dies ist ein Beispiel für eine Karte mit Bild.
Image card example
<Card title="Bildkarte" img="/images/card-with-image.png">
  Dies ist ein Beispiel für eine Karte mit Bild.
</Card>
Sie können den Call-to-Action-Text anpassen und festlegen, ob ein Pfeil angezeigt wird. Standardmäßig werden Pfeile nur bei externen Links angezeigt.

Link card

Dies ist ein Beispiel für eine Karte mit Symbol und Link. Ein Klick auf diese Karte führt Sie zur Seite „Columns“.
Link card example
<Card
  title="Link card"
  icon="link"
  href="/components/columns"
  arrow="true"
  cta="Hier klicken"
>
  {/* Dies ist ein Beispiel für eine Karte mit Symbol und Link. Ein Klick auf diese Karte führt Sie zur Seite „Columns“. */}
</Card>

​
Karten gruppieren

Verwenden Sie die Columns-Komponente, um mehrere Karten nebeneinander anzuordnen.

First card

Dies ist die erste Karte.

Second card

Dies ist die zweite Karte.
Columns example
<Columns cols={2}>
  <Card title="First card" icon="panel-left-close">
    This is the first card.
  </Card>
  <Card title="Second card" icon="panel-right-close">
    This is the second card.
  </Card>
</Columns>

​
Eigenschaften

​
title
string
required
Der auf der Karte angezeigte Titel
​
icon
string
Das anzuzeigende Icon.Optionen:
  • Name eines Font Awesome-Icons
  • Name eines Lucide-Icons
  • JSX-kompatibler SVG-Code in geschweiften Klammern
  • URL zu einem extern gehosteten Icon
  • Pfad zu einer Icon-Datei in deinem Projekt
Für benutzerdefinierte SVG-Icons:
  1. Konvertiere dein SVG mit dem SVGR-Konverter.
  2. Füge deinen SVG-Code in das SVG-Eingabefeld ein.
  3. Kopiere das vollständige <svg>...</svg>-Element aus dem JSX-Ausgabefeld.
  4. Umschließe den JSX-kompatiblen SVG-Code mit geschweiften Klammern: icon={<svg ...> ... </svg>}.
  5. Passe height und width nach Bedarf an.
​
iconType
string
Der Iconstil von Font Awesome. Wird nur mit Font Awesome-Icons verwendet.Optionen: regular, solid, light, thin, sharp-solid, duotone, brands.
​
color
string
Symbolfarbe als Hex-Code (z. B. #FF6B6B).
​
href
string
URL, zu der navigiert wird, wenn auf die Karte geklickt wird.
​
horizontal
boolean
Die Karte in einem kompakten, horizontalen Layout anzeigen.
​
img
string
URL oder lokaler Pfad zu einem Bild, das oben auf der Karte angezeigt wird.
​
cta
string
Benutzerdefinierter Text für die Aktionstaste.
​
arrow
boolean
Pfeilsymbol des Links anzeigen oder ausblenden.