You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Card

Overview

  • The Card component is a container for grouped information.
  • It supports a title and subtitle as visual identifiers.
  • Cards can exist in active, disabled, or expanded states.
  • Actions can be assigned to trigger events, such as On Change.

Card component overview

Specs

Tokens

Token Description
component name Name visible in the structure. Can be changed or left as default.
title Text title of the card.
subtitle Subtitle of the card.
state: active Card is marked as active.
state: disabled Card is marked as disabled.
state: expanded Card is expanded, can be combined with active.
event: On Change Event triggered when a change occurs.
add event action Defines a custom action added via the Action Editor.

Structure

  • A Card consists of a title and a subtitle.
  • The component name can be set or left unchanged.

Basic structure of the card component

Actions & Variants

Cards can exist in the following states:

  • Active → Card is marked as active.

  • Disabled → Card is marked as disabled.

  • Expanded → Card is expanded and can be combined with Active.

  • Actions can be added through the Action Editor.

  • Supported event: On Change.

Guidelines

Configuring Toolbars

  • Cards do not have a first and second toolbar.
  • Within all cards, only two actions are allowed:
  • More
  • Expand/Collapse (if the card supports this function).
  • Every card must always include a More icon.

Do's and Don'ts for using toolbars with cards

Accessibility

[NO DATA AVAILABLE]

  • No labels