Card

Diese Dokumentation wird aktuell überarbeitet und befindet sich im Beta-Status. Inhalte können sich noch ändern.

Diese Komponente wird erneut auf Barrierefreiheit getestet. Der vollständige Test steht noch aus und kann erst nach einem abgeschlossenen Release erfolgen.

Synonyme: Container, Box, Panel

Beschreibung: Die Card-Komponente ist ideal, um einzelne Bereiche einer Webseite optisch hervorzuheben und Inhalte zu strukturieren. Sie besteht aus einem Titel-Bereich und einem Inhalts-Bereich, die durch eine visuelle Trennlinie voneinander abgegrenzt sind.

Beispiel

Darstellung einer einfachen Card mit Titel und Inhaltsbereich. Code kann eingeblendet werden.

Inhaltsbereich mit beliebigem HTML

<KolCard _label="Card Titel" >Inhaltsbereich mit beliebigem HTML</KolCard>

Barrierefreiheit

• Der Titel wird semantisch korrekt als Überschrift ausgezeichnet und kann über das Attribut _level in seiner Hierarchieebene (1–6 oder 0 für Text ohne Überschrift) festgelegt werden.
• Der Inhaltsbereich ist vollständig zugänglich und kann beliebiges HTML enthalten.
• Das optionale Schließen-Symbol (über _has-closer) wird mit entsprechenden ARIA-Attributen gekennzeichnet.
• Die Card ist vollständig über die Tastatur bedienbar.

Links und Referenzen

Verwendung

Best Practices / Empfehlungen

• Nutzen Sie die Card-Komponente, um zusammenhängende Inhalte visuell zu gruppieren und zu strukturieren.
• Verwenden Sie prägnante, aussagekräftige Beschriftungen über das Attribut _label.
• Setzen Sie die Überschriftenebene (_level) konsistent ein, um eine sinnvolle Dokumentstruktur zu bewahren.
• Berücksichtigen Sie auf mobilen Geräten, dass zu viele Cards übereinander stapeln können – nutzen Sie die Schließ-Funktion (_has-closer), um Platz zu sparen.
• Platzieren Sie kritische Aktionselemente nicht ausschließlich innerhalb geschlossener Cards, wenn diese die Kernfunktionalität betreffen.
• Vermeiden Sie übermäßige Verschachtelung von Cards innerhalb von Cards.

Anwendungsfälle

• Darstellung von Produktinformationen oder Dienstleistungsbeschreibungen
• Gruppierung von zugehörigen Formularbereichen
• Strukturierung von Dashboard-Übersichtselementen
• Hervorhebung von Informationsblöcken oder Tipps
• Erstellung von Kachel-Layouts für Inhaltsübersichten
• Kollapsible Bereiche für schlanke Layouts auf mobilen Geräten

Konstruktion / Technik

Playground

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

<KolCard _label="Kartentitel" >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</KolCard>

Funktionalitäten (mit Code)

Basisinhalt und Beschriftung

Die sichtbare Überschrift wird über _label gesetzt. Der Inhaltsbereich wird über den Slot befüllt.

Inhaltsbereich

<KolCard _label="Card Titel" >Inhaltsbereich</KolCard>

Überschriftenstruktur

Die Überschriftenebene wird über _level gesteuert. Möglich sind die Level 0–6, wobei 0 den Titel als Bold-Text ohne Überschriftenelement darstellt.

Inhaltsbereich

<KolCard _label="Card Titel" _level={2} >Inhaltsbereich</KolCard>

Schließ-Funktion

Das Attribut _has-closer ermöglicht dem Nutzer, die Card zu schließen und damit Platz zu sparen.

Inhaltsbereich

<KolCard _hasCloser={true} _label="Schließbare Card" >Inhaltsbereich</KolCard>

Events

Zur Behandlung von Events bzw. Callbacks siehe .

Event	Auslöser	Value
close	Komponente wird geschlossen	-

API

Overview

The Card component is ideal for visually highlighting individual sections of your website. It allows you to structure your content very easily.

The Card component consists of a title area and a content area.

The title area is displayed in a larger font. The content area is visually separated from the title area by a horizontal dividing line and is rendered in the default font.

Properties

Property	Attribute	Description	Type	Default
_hasCloser	_has-closer	Defines whether the element can be closed.	boolean | undefined	false
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string	undefined
_level	_level	Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.	0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined	0
_on	--	Defines the event callback functions for the component.	undefined | { onClose?: EventCallback<Event> | undefined; }	undefined

Slots

Slot	Description
	Allows arbitrary HTML to be inserted into the content area of the card.

---