Card

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

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

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
_href	_href	Sets the target URI of the link or citation source.	string | undefined	undefined
_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; onFocus?: EventCallback<FocusEvent> | undefined; onBlur?: EventCallback<FocusEvent> | undefined; }	undefined
_target	_target	Defines where to open the link.	string | undefined	undefined

Methods

click

click() => Promise<void>

Clicks the primary interactive element inside this component.

Returns

Type: Promise<void>

focus(options?: KolFocusOptions) => Promise<void>

Sets focus on the internal element.

Parameters

Name	Type	Description
options	any

Returns

Type: Promise<void>

Slots

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

---