logo

Card
beta

Card groups the content and actions that belong to a single subject.

1. Anatomy

2. Configurations

2.1 Clickable

This is a boolean value. A clickable card can direct users to another page.

3. Behavior

A clickable card brings users to a different page.

4. States

The states only apply to clickable cards.

5. Composibility

You can customize the content of cards. The cards container wraps around the content component.

*Text wrapping does not apply automatically.
  • Manipulate the content components’ width to define the dimension of the card.
  • Set width on content components to wrap the text within the content components.

The text wrapping does not apply automatically. Please set a value to the content component manually.

6. Keyboard experience

The keyboard experience only applies to the entire card when the card is clickable. When the card is static, it only focuses on the interactive components within the card.

7. Screen reader experience

8. Resilience & responsiveness

*Text wrapping in the child components does not apply automatically.
  • Manupulate the size of the child components to define the dimention of the card.
  • Passing values to a class to design the responsiveness of the component yourself.
See 5. Composibility for details