Zum Inhalt springen
UI Kit
Accent

Card Components für React und Tailwind

Eine Fläche für zehn Aufgaben, von der schlichten Karte über Profil, Paket, Zahl, Bild und Link bis zu Glas und Lichtkante.

10 Variants
Kategorie wechseln

Eine Fläche für zehn Aufgaben

Cards fassen zusammen, was zusammengehört, eine Person, ein Produkt, eine Zahl oder einen Link. Die Karte ist eine Fläche mit zehn Varianten, so teilt ein Grid gemischter Cards trotzdem Radius, Rand, Schatten und Abstände.

„Standard“ nimmt jeden Inhalt, „Interaktiv“ macht die ganze Card zum Link mit klarem Fokusring. „Merkmal“ trägt Icon, Titel und Satz, „Profil“ eine Person mit Porträt und Rolle. „Paket“ ist eine kompakte Preiskarte, „Kennzahl“ eine Zahl mit Veränderung, „Bild“ ein Bild mit Unterschrift. „Link“ zeigt eine externe Seite in der Vorschau, „Glas“ liegt über Bildern, „Lichtkante“ schickt ein Licht um die eine Card, auf die es ankommt.

Mach entweder ein Element in der Card klickbar oder die ganze Card, nie beides. Halte Cards in einem Grid auf gleicher Höhe, damit die Reihen fluchten. Eine Lichtkante pro Seite genügt, sie zieht den Blick nur, solange sie selten ist.

Karte

Standard

Kopf mit Aktion, Inhalt und eine Fußzeile, deren Linie bis an die Kanten läuft.

Interaktiv

Ein Licht folgt dem Zeiger, die Karte hebt und neigt sich ein wenig, oben läuft eine Lichtkante. Für Karten, die Links sind.

Merkmal

Icon-Kachel, Titel, Text und ein Link über die ganze Karte. Optional ein Bild oben.

Profil

Foto oder Initialen, Name, Rolle, ein paar Zahlen, Links und zwei Aktionen.

Paket

Kompakte Pakete für Seitenleisten und Upsells. Das empfohlene trägt die Lichtkante.

Kennzahl

Wert, Änderung im Format der Sprache und ein kleiner Verlauf. Weniger kann besser sein.

Bild

Text unter oder auf dem Bild. Das Bild zoomt beim Hovern ein wenig, der Titel ist der Link.

Glas

Matte Fläche über einem Bild oder farbigem Grund. Das Bild wandert beim Scrollen dahinter, die Karte neigt sich zum Zeiger.

Lichtkante

Ein Licht läuft um die Kante. Für die eine Fläche, die auf der Seite am meisten zählt.

Details

Was Karte mitbringt, aus Registry und Quellcode gelesen.

Bereich
Elements
Variants
10
Version
1.0.0 · seit 1.0.0
Datei
components/ui/card.tsx
Bringt mit
utilskiticonbutton
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 4 eigene Texte
Studio
Im Code anpassen
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle CardProps aus components/ui/card.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch. Nimmt außerdem alle Props von React.HTMLAttributes<HTMLDivElement> an.

  • variantoptional
    CardVariant

    defaultinteractiveoutlinemutedglassbeam

  • paddingoptional
    keyof typeof PAD
  • hrefoptional
    string

    Render as a link. The whole card becomes one target.

  • asoptional
    'div' | 'article' | 'section' | 'li'
  • tiltoptional
    boolean

    Tilts a little toward the pointer, at most 3 degrees. Mouse only, still with reduced motion.

Eingebaute Texte

Diese Texte schreibt Karte selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 4 Texte anzeigen
moreEnglisch Learn moreDeutsch Mehr erfahren
perMonthEnglisch / monthDeutsch / Monat
popularEnglisch PopularDeutsch Beliebt
vsLastEnglisch vs. last monthDeutsch ggü. Vormonat

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Setzt aria-label, damit Screenreader Zweck und Zustand ansagen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Kommt ohne Client-State aus. Der Server schreibt sie vollständig, sie ist auch ohne JavaScript lesbar.

Bewegung

  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 17 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Karte?

Mit aiw add @ai-website/card. Der Befehl legt die Datei components/ui/card.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind icon und button. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Karte?

10 Varianten, Standard, Interaktiv, Merkmal, Profil, Paket, Kennzahl, Bild, Link, Glas und Lichtkante. Du wählst sie mit der Prop variant, zum Beispiel variant="glass".

Kann ich die Texte von Karte übersetzen?

Ja. Karte bringt 4 eigene Texte auf Deutsch und Englisch mit, etwa „Mehr erfahren“, „/ Monat“ und „Beliebt“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Karte einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Karte mit aiw_components und installieren sie mit aiw_add @ai-website/card. Nenn im Prompt die Variante, etwa variant="interactive", dann schreibt der Assistent deine Inhalte direkt in die Props.

Ähnliche Components

Mehr aus Elements, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Cards stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert