Interactive cards

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

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

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

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

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

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

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.

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.

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.

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

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.