Card

This documentation is currently being revised and is in beta status. Content may still change.

This component is being retested for accessibility. The full test is still pending and can only be completed after a release.

Synonyms: Container, Box, Panel

Description: The Card component is ideal for visually highlighting individual sections of a webpage and structuring content. It consists of a title area and a content area, separated from each other by a visual dividing line.

Example

Display of a simple card with title and content area. Code can be shown.

Content area with arbitrary HTML

<KolCard _label="Card Title" >Content area with arbitrary HTML</KolCard>

Accessibility

• The title is semantically marked up as a heading and its hierarchy level (1–6, or 0 for text without a heading element) can be set via the _level attribute.
• The content area is fully accessible and can contain any HTML.
• The optional close button (via _has-closer) is annotated with appropriate ARIA attributes.
• The card is fully operable via keyboard.

Links and References

Usage

Best Practices / Recommendations

• Use the Card component to visually group and structure related content.
• Use concise, meaningful labels via the _label attribute.
• Apply heading levels (_level) consistently to maintain a meaningful document structure.
• On mobile devices, consider that too many cards can stack up – use the close function (_has-closer) to save space.
• Do not place critical action elements exclusively inside closed cards if they are part of core functionality.
• Avoid excessive nesting of cards within cards.

Use Cases

• Displaying product information or service descriptions
• Grouping related form sections
• Structuring dashboard overview elements
• Highlighting information blocks or tips
• Creating tile layouts for content overviews
• Collapsible sections for lean layouts on mobile devices

Construction / Technical

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="Card Title" >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>

Functionalities (with Code)

Basic Content and Label

The visible heading is set via _label. The content area is populated via the slot.

Content area

<KolCard _label="Card Title" >Content area</KolCard>

Heading Structure

The heading level is controlled via _level. Levels 0–6 are possible, where 0 renders the title as bold text without a heading element.

Content area

<KolCard _label="Card Title" _level={2} >Content area</KolCard>

Close Function

The _has-closer attribute allows the user to close the card to save space.

Content area

<KolCard _hasCloser={true} _label="Closable Card" >Content area</KolCard>

Events

For the handling of events or callbacks, see .

Event	Trigger	Value
close	Component is being closed	-

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.

---