Card

Cards are a container of information, actions and data with a hierarchy to make easy scanning the content. A card can be defined as a unit, so it has all the information within it, making the component useful to show images, text, and interactive elements. The structure of the card can be seen as blocks, each block is optional to be displayed but the overall element should make a cohesive design, even if it includes text, images or other elements.

States

Component states: enabled, hover and focus.

Anatomy

1.
Card image
2.
Custom content
3.
Container

Design tokens

Color

Component token	Element	Core token	Value
`backgroundColor`*	Container	`color-white`	#ffffff
`focusColor`*	Container:focus	`color-blue-600`	#0095ff

The background-color token belongs to the box component, changes made on that component will affect the card element.

Border

Property	Element	Core token	Value
`border-width`	Container	`border-width-0`	0
`border-style`	Container	`border-style-none`	none
`border-radius`	Container	`border-radius-medium`	0.25rem / 4px

Spacing

Property	Element	Core token	Value
`margin-top`	Custom content - subtitle	`spacing-4`	0.25rem / 4px
`margin-bottom`	Custom content - title	`spacing-16`	1rem / 16px
`padding-left`	Custom content	`spacing-24`	1.5rem / 24px
`padding-top`	Custom content	`spacing-24`	1.5rem / 24px
`padding-bottom`	Custom content	`spacing-24`	1.5rem / 24px
`padding-right`	Container	`spacing-24`	1.5rem / 24px

Size

Component token	Element	Core token	Value
`height`	Container height	-	220px
`width`	Container width	-	400px

Property	Element	Value
`max-width`	Image	140px

Margin

Margin properties can be applied independently to top, right, bottom and left sides of the card container.

Margin	Value
`xxsmall`	6px
`xsmall`	16px
`small`	24px
`medium`	36px
`large`	48px
`xlarge`	64px
`xxlarge`	100px

Specifications
States
Anatomy
Design tokens

Edit this page on GitHub

Report an issue on GitHub

Button

NextCheckbox