Card

A card container is an element designed to be interactive. A tile should be easy to scan for relevant and actionable information. Elements, like text and buttons, should be placed inside them in a way that clearly indicates hierarchy. Card layouts can vary to support the types of content they contain.

The card containers have different states and styles and can be selectable or clickable.

Simple Card

  • Enabled background colour White, with shadow

  • Hover background colour White, and bottom border colour; Blue D30

  • Focus border is Purple L50

  • Selected background colour White, and bottom border colour; Blue Base

  • Disabled background colour White, and bottom border colour; Grey L40

  • Dashed border colour; Grey Base (2px dash, 3px Gap)

  • Danger background colour White, and bottom border colour; Red Base

  • Danger focussed border; Red L70

PreviousButtonNextCheckbox

Last updated