Selection Card Group

Selection Cards provide visually enhanced selection options, capturing user attention.

Anatomy

Selection card / Style

Item

Name

Description

Component

Optional

1

Selector

Enables users to select an option. Can be a radio button or a checkbox.

Radio Button

Checkbox

 

2

Title

A short text that describes the option.

 

 

3

Description

Provides additional context about the option.

 

 

4

Slot

A visual asset to help users quickly identify the option.

Icon

Yes


Specification and properties

Card variants

Selection card / Variants / Horizontal
Selection card / Variants / Vertical

Item

State

1

Horizontal

2

Vertical

 

Selection types

Selection card / Type
Selection card / Type
Selection card / Type

Item

Selector

Selection Type

1

Radio Button

Single-Select

2

Checkbox

Multi-Select

3

Card Selection

Multi-Select