Card

Container for a related grouping of content and actions

Layout

Card content is flexible based on the needs of the content. Hero image, header, body, preview image and footer elements can help you organize your content within the card. When designing your card, consider the hierarchy of information and how it can be organized.

See below for a couple of examples:

Layout examples of a card

Color application / States

Rest

	Design token	Value
(1) Product icon	NeutralForeground1.Rest	#0F1A38
(2) Header: title text	NeutralForeground1.Rest	#0F1A38
(3) Header: subtext	NeutralForeground2.Rest	#595959
(4) Body text	NeutralForeground2.Rest	#595959
(5) Header/Body/Footer background	Fill: NeutralBackground1.Rest Stroke: NeutralStroke1.Rest	#FFFFFF #E4E7E7
(6) Checkbox		Follow Checkbox Rest State
(7) Buttons		Follow Buttons Rest State

Hover

	Design token	Value
(1) Header/Body/Footer background	Fill: NeutralBackground1.Rest Stroke: NeutralStroke1.Hover	#FFFFFF #CACECE
(2) Checkbox		Follow Checkbox Hover State
(3) Buttons		Follow Buttons Hover State

Pressed

	Design token	Value
(1) Header/Body/Footer background	Fill: NeutralBackground1.Rest Stroke: NeutralStroke1.Pressed	#FFFFFF #AFB6B6
(2) Checkbox		Follow Checkbox Pressed State
(3) Buttons		Follow Buttons Pressed State

Selected

	Design token	Value
(1) Header/Body/Footer background	Fill: NeutralBackground1.Rest Stroke: NeutralStroke1.Selected	#FFFFFF #959D9D
(2) Checkbox		Follow Checkbox Rest State
(3) Buttons		Follow Buttons Selected State

Dragged

	Design token	Value
(1) Header/Body/Footer background	NeutralBackground1.Rest	#FFFFFF
(2) Checkbox		Follow Checkbox Rest State
(3) Buttons		Follow Buttons Rest State

Disabled

	Design token	Value
(1) Header/Body/Footer background	Fill: NeutralBackground1.Rest Stroke: NeutralStrokeDisabled.Rest	#FFFFFF #F2F3F3
(2) Checkbox		Follow Checkbox Disabled State
(3) Buttons		Follow Buttons Disabled State

Specs

Coming soon

Spacing

Overall

	Design token	Value
Padding between elements	spacingVerticalNone	0px

Hero

	Design token	Value
Padding top/bottom	spacingVerticalM	16px
Padding left/right	spacingHorizontalM	16px

Header

	Design token	Value
Padding top/bottom	spacingVerticalM	16px
Padding left/right	spacingHorizontalM	16px
Padding before text	spacingHorizontalMNudge	12px

Body

	Design token	Value
Padding top/bottom	spacingVerticalM	16px
Padding left/right	spacingHorizontalM	16px

Footer

	Design token	Value
Padding top	spacingVerticalMNudge	12px
Padding bottom	spacingVerticalM	16px
Padding left/right	spacingHorizontalM	16px
Padding between buttons	spacingHorizontalMNudge	12px