Card

Fläche für gruppierte Inhalte mit optionaler Elevation.

Wann nutzen

• Zusammengehörige Inhalte (Titel, Text, Actions)
• Erhöhte Panels mit variant="elevated"
• Dezente Gruppierung mit variant="ghost"

Wann nicht

• Seitenbreite begrenzen (dafür Container)
• Hero-Bereiche (dafür Hero v1)
• Einzelne klickbare Controls ohne Inhalt

Variants

Default card

Elevated card

Outline card

Ghost card

Props

Prop	Typ	Default
variant	default | elevated | outline | ghost	default
padding	none | sm | md | lg	md
class	string	—

Verwandte Komponenten

Container · Heading · Text

Anti-Patterns

• Keine hardcodierten Hintergrundfarben in Slots
• Card nicht als <button>-Wrapper ohne Semantik
• padding="none" nur mit bewusstem inneren Abstand

Usage

---
import Card from '@addxion/components/Card';
---

<Card variant="elevated" padding="lg">
  <h3 class="tw:text-lg tw:font-medium tw:text-text">Title</h3>
  <p class="tw:text-text-muted">Content</p>
</Card>

Truths

ID	Wahrheit
T-PKG-NEON	Consumer-Einstieg: @addxion/neon, nicht @addxion/core
T-NEON-BRAND	Markenwerte in Consumer brand.css

Für Agents

Scope: Neon Card-Komponente — API und Verwendung.

• Aus @addxion/neon/react importieren
• Layout-Anpassungen über Tokens und Props, nicht Fork