Interactive Cards

Interactive cards are used for actions like navigation and selection when our options need to be descriptive.

Usage
Code

Interactive cards are flexible and make for an easily scannable way to present options.

Types

Action cards

Action cards are used for navigation where description is important and the design needs to look neither overwhelming nor underwhelming. They are single select.


Action card Action card

Selection cards

Selection cards are used for selection. They can be single-select or multi-select.


Selection card Selection card

States

Interactive cards come in 5 states: default, hover, focus, disabled, and active.

Action cards


Various states of action card Various states of action card

Selection cards


Various states of selection card Various states of selection card

Structure

Content alignment

Center

Center aligned content Center aligned content


PropertyValue(s)
Corner radius4 px
Padding (top, right, bottom, left)16 px, 16 px, 16 px, 16 px
Spacing between content and icon8 px

Left

Left aligned content Left aligned content


PropertyValue(s)
Corner radius4 px
Padding (top, right, bottom, left)16 px, 16 px, 16 px, 12 px
Spacing between content and icon12 px

Usage

Interactive cards vs Chips

Interactive cards are used for descriptive and well organized options, while chips are a space efficient way to display simpler options.

 Interactive cards vs Chips Interactive cards vs Chips


Interactive cards vs Radio/checkbox

Interactive cards are used when you need to categorize your options well using strong visual representation without making it overwhelming, while radio/checkbox is used for simpler layouts to save space.

Interactive cards vs Radio/checkbox Interactive cards vs Radio/checkbox

Content alignment

Left

It is recommended to align content of interactive cards to the left when a long description is used, to give more visual room to read each line.

Left content alignment Left content alignment

Center

It is recommended to align the content of interactive cards to the center when the icon is sufficient to convey info or the description is short.

Center content alignment Center content alignment


It is recommended to give a spacing of 16px between cards when stacking them horizontally or vertically.

Recommended spacing between cards Recommended spacing between cards


Custom interactive cards

Interactive cards can have custom content inside it, but the states of the card with custom content must remain coherent with the default interactive cards.

Custom interactive cards Custom interactive cards


Was this page helpful?