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.
Center aligned content
Property | Value(s) |
---|---|
Corner radius | 4 px |
Padding (top, right, bottom, left) | 16 px, 16 px, 16 px, 16 px |
Spacing between content and icon | 8 px |
Left aligned content
Property | Value(s) |
---|---|
Corner radius | 4 px |
Padding (top, right, bottom, left) | 16 px, 16 px, 16 px, 12 px |
Spacing between content and icon | 12 px |
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 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
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
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
It is recommended to give a spacing of 16px between cards when stacking them horizontally or vertically.
Recommended spacing between 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