---
name: Card
description: Onesown Blazor Komponente Card (Grouping). Verwende diesen Skill wenn du die Card-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# Card

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** Grouping  
**Basisklasse:** `OoComponentBase`  

Flexible Inhaltskarte mit optionalem Header (Titel, Untertitel, Icon, Bild), ChildContent, FooterContent und vier visuellen Varianten (Filled, Outlined, Flat, Ghost). Unterstützt Klick-Interaktion und konfigurierbaren Radius.

**Live-Demo:** https://components.schini.com/demo/card  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Title`` | ``string`` |  | Überschrift der Card. |
| ``Subtitle`` | ``string`` |  | Untertitel unterhalb des Titels. |
| ``Icon`` | ``string`` |  | Material-Symbol-Name für das Icon im Header. |
| ``Image`` | ``string`` |  | URL eines Bildes, das oben in der Card angezeigt wird. |
| ``ImageAlt`` | ``string`` | ``""`` | Alt-Text für das Bild. |
| ``Variant`` | ``OoCardVariant`` | ``OoCardVariant.Filled`` | Visuelle Variante: Filled, Outlined, Flat, Ghost. |
| ``Radius`` | ``string`` | ``OoRadius.Md`` | Border-Radius der Card. |
| ``OnClick`` | ``EventCallback<MouseEventArgs>`` |  | Klick-Event – macht die Card interaktiv (Hover, Cursor pointer). |
| ``HeaderContent`` | ``RenderFragment`` |  | Inhalt im Header rechts neben Titel/Subtitle (z. B. Badges, Buttons). |
| ``ChildContent`` | ``RenderFragment`` |  | Hauptinhalt der Card. |
| ``FooterContent`` | ``RenderFragment`` |  | Footer-Bereich der Card. |

## Geerbte Parameter (OoComponentBase)

Alle nicht deklarierten HTML-Attribute (``class``, ``style``, ``data-*``, ``aria-*``, ...) werden an das Root-Element weitergereicht.

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Size`` | ``string`` |  | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. |

## Hinweise

- Natives HTML-Attribut class wird automatisch an das Root-Element weitergegeben
- Natives HTML-Attribut style wird automatisch an das Root-Element weitergegeben
- Alle weiteren nicht deklarierten Attribute (data-*, aria-*, id, tabindex, …) werden ebenfalls weitergereicht
- Größe der Komponente via Size mit OoSize-Konstanten steuern (OoSize.Xs bis OoSize.Xl)
- Einfache Karte: Title="Mein Titel" mit ChildContent für den Körper
- Untertitel: Subtitle="Beschreibung" ergänzt den Titel im Header
- Icon im Header: Icon="info" zeigt ein Material-Symbol links neben dem Titel
- Bild oben: Image="url" rendert ein Bild über dem Header-Bereich
- Aktionselemente im Header: HeaderContent für Buttons/Badges rechts neben Titel/Subtitle
- Klickbare Karte: OnClick-Callback aktiviert Hover-Effekt und Cursor pointer
- Optik: Variant="OoCardVariant.Outlined" für Rahmen statt Füllung; Ghost für transparenten Hintergrund
- Radius: Radius="OoRadius.Lg" oder beliebiger CSS-Wert (z. B. "12px")