---
title: Card
description: >-
  Erfahre, wie du die Card-Komponente für klickbare, gestaltete Container mit
  Icons, Bildern, Links und CTAs in Rasterlayouts verwendest.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Die `<Card>`-Komponente ist ein klickbarer, gestalteter Container. Verwende sie, um auf andere Seiten zu verlinken oder zusammengehörige Inhalte zu gruppieren. Kombiniere Cards mit `<Columns>`, um Rasterlayouts zu erstellen.

## Verwendung

```mdx
<Card title="Quickstart" icon="rocket" href="/quickstart">
  Launch your docs in minutes.
</Card>
```

## Einfache Card

Eine einfache Card mit einem Titel:

<Card title="Erste Schritte">
  Richte dein erstes Projekt in weniger als fünf Minuten ein.
</Card>

```mdx
<Card title="Getting Started">
  Set up your first project in under five minutes.
</Card>
```

## Card mit Icon

Füge ein Icon hinzu, damit sich Cards optisch stärker unterscheiden:

<Card title="Dokumentation" icon="book">
  Entdecke unsere vollständige Dokumentation und lerne alle Funktionen kennen.
</Card>

```mdx
<Card title="Documentation" icon="book">
  Explore our complete documentation to learn all features.
</Card>
```

## Card mit Link

Cards können auf andere Seiten verlinken:

<Card title="API-Referenz" icon="code" href="/de/introduction">
  Zeige die vollständige API-Dokumentation an.
</Card>

```mdx
<Card title="API Reference" icon="code" href="/introduction">
  View the complete API documentation.
</Card>
```

## Card mit Pfeil

Füge einen Pfeilindikator hinzu, um anzuzeigen, dass die Card auf eine andere Stelle verlinkt. Bei externen Links werden Pfeile automatisch angezeigt, du kannst sie jedoch auch für interne Links aktivieren:

<Card title="Quickstart" icon="github" href="/de/quickstart" arrow={true}>
  Sieh dir den Quellcode an und beteilige dich an der Entwicklung.
</Card>

```mdx
<Card title="Quickstart" icon="github" href="/quickstart" arrow={true}>
  Check out the source code and contribute.
</Card>
```

Externe Links zeigen den Pfeil automatisch an:

<Card title="Externe Ressource" href="https://example.com">
  Diese Card verlinkt auf eine externe Website.
</Card>

```mdx
<Card title="External Resource" href="https://example.com">
  This card links to an external site.
</Card>
```

## Card mit CTA

Füge unter dem Inhalt der Card einen Call-to-Action-Text hinzu:

<Card title="Quickstart" icon="star" href="/de/quickstart" cta="Jetzt upgraden">
  Schalte erweiterte Funktionen und vorrangigen Support frei.
</Card>

```mdx
<Card title="Quickstart" icon="star" href="/quickstart" cta="Upgrade now">
  Unlock advanced features and priority support.
</Card>
```

Kombiniere Pfeil und CTA für maximale Hervorhebung:

<Card title="Quickstart" icon="rocket" href="/de/quickstart" arrow={true} cta="Mit dem Erstellen beginnen">
  Alles, was du für den Start deines ersten Projekts benötigst.
</Card>

```mdx
<Card title="Quickstart" icon="rocket" href="/quickstart" arrow={true} cta="Start building">
  Everything you need to launch your first project.
</Card>
```

## Card mit Bild

Zeige oben in der Card ein Bild an:

<Card title="Visueller Leitfaden" img="/images/card-example-1.webp">
  Eine Card mit einem Bildheader.
</Card>

```mdx
<Card title="Visual Guide" img="/images/card-example.webp">
  A card featuring an image header.
</Card>
```

## Card-Raster mit Columns

Verwende `Columns`, um mehrere Cards in einem responsiven Raster anzuordnen:

<Columns cols={2}>
  <Card title="Quickstart" icon="rocket" href="/de/quickstart">
    In wenigen Minuten startklar.
  </Card>
  <Card title="Tutorials" icon="graduation-cap" href="/de/content/mdx-basics">
    Schrittweise Lernpfade.
  </Card>
  <Card title="Beispiele" icon="flask" href="/de/components/overview">
    Praxisnahe Codebeispiele.
  </Card>
</Columns>

```mdx
<Columns cols={2}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Get up and running in minutes.
  </Card>
  <Card title="Tutorials" icon="graduation-cap" href="/content/mdx-basics">
    Step-by-step learning paths.
  </Card>
  <Card title="Examples" icon="flask" href="/components/overview">
    Real-world code examples.
  </Card>

</Columns>
```

### Dreispaltiges Layout

<Columns cols={3}>
  <Card title="Dokumentation" icon="book">
    Dokumentation
  </Card>
  <Card title="API" icon="code">
    API-Referenz
  </Card>
  <Card title="Blog" icon="newspaper">
    Neueste Updates
  </Card>
</Columns>

```mdx
<Columns cols={3}>
  <Card title="Docs" icon="book">
    Documentation
  </Card>
  <Card title="API" icon="code">
    API Reference
  </Card>
  <Card title="Blog" icon="newspaper">
    Latest updates
  </Card>
</Columns>
```

## Props

<ParamField name="title" type="string" required>
  Der oben in der Card angezeigte Titel.
</ParamField>

<ParamField name="icon" type="string">
  Name des Font Awesome-Icons (z. B. „book“, „code“, „rocket“). Wird standardmäßig in der Solid-Variante gerendert. Füge ein Stilpräfix wie `light/book` hinzu, um die Stärke zu ändern. Siehe [Icons](/de/content/icons).
</ParamField>

<ParamField name="href" type="string">
  URL, auf die die Card verlinkt. Kann intern (`/docs/intro`) oder extern (`https://example.com`) sein.
</ParamField>

<ParamField name="img" type="string">
  Pfad zu einem Bild, das oben in der Card angezeigt wird.
</ParamField>

<ParamField name="arrow" type="boolean">
  Zeigt oben rechts einen Pfeilindikator (↗) an. Wird für externe Links (URLs, die mit `http://` oder `https://` beginnen) automatisch aktiviert. Setze den Wert auf `true`, um ihn bei internen Links anzuzeigen, oder auf `false`, um ihn bei externen Links auszublenden.
</ParamField>

<ParamField name="cta" type="string">
  Benutzerdefinierter Call-to-Action-Text, der unter dem Inhalt der Card angezeigt wird. Nur sichtbar, wenn auch `href` angegeben ist.
</ParamField>

## Props von Columns

<ParamField name="cols" type="number" default="2">
  Anzahl der Spalten im Raster. Akzeptiert 1, 2, 3 oder 4.
</ParamField>

## Wie geht es weiter?

<Columns cols={2}>
  <Card title="Komponentenübersicht" icon="puzzle-piece" href="/de/components/overview">
    Alle verfügbaren Komponenten durchsuchen
  </Card>
  <Card title="MDX-Grundlagen" icon="file-code" href="/de/content/mdx-basics">
    Erfahre, wie du Komponenten in MDX verwendest
  </Card>
</Columns>