`<Card />`

The Card component acts much like a Box, but with a background and foreground color. Components within a Card inherit its colors.

Open in Arcade

Isn’t this the same as a `Box`?

Almost – the Card component is exactly like a Box except it also has color, border, radius, and shadow properties. So the Card is typically used when needing a background and foreground color on an element.

Properties

as?: React.ElementType | keyof JSX.IntrinsicElements

border?: boolean

borderTop?: boolean

borderRight?: boolean

borderBottom?: boolean

borderLeft?: boolean

gridColumn?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>

column?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>

deprecated

Use gridColumn instead. Will be removed in v4.

gridColumnStart?: 'auto' | number | Array<'auto' | number>

columnStart?: 'auto' | number | Array<'auto' | number>

deprecated

Use gridColumnStart instead. Will be removed in v4.

gridColumnEnd?: 'auto' | number | Array<'auto' | number>

columnEnd?: 'auto' | number | Array<'auto' | number>

deprecated

Use gridColumnEnd instead. Will be removed in v4.

display?: 'none' | 'block' | 'grid' | 'flex' | 'inline-block' | Array<'none' | 'block' | 'grid' | 'flex' | 'inline-block'>

flex?: number | number[]

height?: 'stretch' | 'fill' | Array<'stretch' | 'fill'>

margin?: number | number[]

marginX?: number | number[]

marginY?: number | number[]

marginTop?: number | number[]

marginRight?: number | number[]

marginBottom?: number | number[]

marginLeft?: number | number[]

overflow?: 'visible' | 'hidden' | 'auto' | Array<'visible' | 'hidden' | 'auto'>

padding?: number | number[]

paddingX?: number | number[]

paddingY?: number | number[]

paddingTop?: number | number[]

paddingRight?: number | number[]

paddingBottom?: number | number[]

paddingLeft?: number | number[]

radius?: number | number[]

gridRow?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>

row?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>

deprecated

Use gridRow instead. Will be removed in v4.

gridRowStart?: 'auto' | number | Array<'auto' | number>

rowStart?: 'auto' | number | Array<'auto' | number>

deprecated

Use gridRowStart instead. Will be removed in v4.

gridRowEnd?: 'auto' | number | Array<'auto' | number>

rowEnd?: 'auto' | number | Array<'auto' | number>

deprecated

Use gridRowEnd instead. Will be removed in v4.

scheme?: 'light' | 'dark'

shadow?: number | number[]

sizing?: 'content' | 'border'

tone?: 'default' | 'transparent' | 'positive' | 'caution' | 'critical' | 'brand'

`<Card />`

The Card component acts much like a Box, but with a background and foreground color. Components within a Card inherit its colors.

Open in Arcade

Isn’t this the same as a `Box`?

Properties

as?: React.ElementType | keyof JSX.IntrinsicElements

border?: boolean

borderTop?: boolean

borderRight?: boolean

borderBottom?: boolean

borderLeft?: boolean

gridColumn?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>gridColumn?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>

column?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>column?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>

deprecated

Use gridColumn instead. Will be removed in v4.

gridColumnStart?: 'auto' | number | Array<'auto' | number>gridColumnStart?: 'auto' | number | Array<'auto' | number>

columnStart?: 'auto' | number | Array<'auto' | number>columnStart?: 'auto' | number | Array<'auto' | number>

deprecated

Use gridColumnStart instead. Will be removed in v4.

gridColumnEnd?: 'auto' | number | Array<'auto' | number>gridColumnEnd?: 'auto' | number | Array<'auto' | number>

columnEnd?: 'auto' | number | Array<'auto' | number>columnEnd?: 'auto' | number | Array<'auto' | number>

deprecated

Use gridColumnEnd instead. Will be removed in v4.

display?: 'none' | 'block' | 'grid' | 'flex' | 'inline-block' | Array<'none' | 'block' | 'grid' | 'flex' | 'inline-block'>display?: 'none' | 'block' | 'grid' | 'flex' | 'inline-block' | Array<'none' | 'block' | 'grid' | 'flex' | 'inline-block'>

flex?: number | number[]

height?: 'stretch' | 'fill' | Array<'stretch' | 'fill'>height?: 'stretch' | 'fill' | Array<'stretch' | 'fill'>

margin?: number | number[]

marginX?: number | number[]

marginY?: number | number[]

marginTop?: number | number[]

marginRight?: number | number[]

marginBottom?: number | number[]

marginLeft?: number | number[]

overflow?: 'visible' | 'hidden' | 'auto' | Array<'visible' | 'hidden' | 'auto'>overflow?: 'visible' | 'hidden' | 'auto' | Array<'visible' | 'hidden' | 'auto'>

padding?: number | number[]

paddingX?: number | number[]

paddingY?: number | number[]

paddingTop?: number | number[]

paddingRight?: number | number[]

paddingBottom?: number | number[]

paddingLeft?: number | number[]

radius?: number | number[]

gridRow?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>gridRow?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>

row?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>row?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>

deprecated

Use gridRow instead. Will be removed in v4.

gridRowStart?: 'auto' | number | Array<'auto' | number>gridRowStart?: 'auto' | number | Array<'auto' | number>

rowStart?: 'auto' | number | Array<'auto' | number>rowStart?: 'auto' | number | Array<'auto' | number>

deprecated

Use gridRowStart instead. Will be removed in v4.

gridRowEnd?: 'auto' | number | Array<'auto' | number>gridRowEnd?: 'auto' | number | Array<'auto' | number>

rowEnd?: 'auto' | number | Array<'auto' | number>rowEnd?: 'auto' | number | Array<'auto' | number>

deprecated

Use gridRowEnd instead. Will be removed in v4.

scheme?: 'light' | 'dark'

shadow?: number | number[]

sizing?: 'content' | 'border'

tone?: 'default' | 'transparent' | 'positive' | 'caution' | 'critical' | 'brand'tone?: 'default' | 'transparent' | 'positive' | 'caution' | 'critical' | 'brand'

`<Card />`

The Card component acts much like a Box, but with a background and foreground color. Components within a Card inherit its colors.

Open in Arcade

Isn’t this the same as a `Box`?

Properties

as?: React.ElementType | keyof JSX.IntrinsicElements

border?: boolean

borderTop?: boolean

borderRight?: boolean

borderBottom?: boolean

borderLeft?: boolean

gridColumn?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>gridColumn?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>

column?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>column?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>

deprecated

Use gridColumn instead. Will be removed in v4.

gridColumnStart?: 'auto' | number | Array<'auto' | number>gridColumnStart?: 'auto' | number | Array<'auto' | number>

columnStart?: 'auto' | number | Array<'auto' | number>columnStart?: 'auto' | number | Array<'auto' | number>

deprecated

Use gridColumnStart instead. Will be removed in v4.

gridColumnEnd?: 'auto' | number | Array<'auto' | number>gridColumnEnd?: 'auto' | number | Array<'auto' | number>

columnEnd?: 'auto' | number | Array<'auto' | number>columnEnd?: 'auto' | number | Array<'auto' | number>

deprecated

Use gridColumnEnd instead. Will be removed in v4.

display?: 'none' | 'block' | 'grid' | 'flex' | 'inline-block' | Array<'none' | 'block' | 'grid' | 'flex' | 'inline-block'>display?: 'none' | 'block' | 'grid' | 'flex' | 'inline-block' | Array<'none' | 'block' | 'grid' | 'flex' | 'inline-block'>

flex?: number | number[]

height?: 'stretch' | 'fill' | Array<'stretch' | 'fill'>height?: 'stretch' | 'fill' | Array<'stretch' | 'fill'>

margin?: number | number[]

marginX?: number | number[]

marginY?: number | number[]

marginTop?: number | number[]

marginRight?: number | number[]

marginBottom?: number | number[]

marginLeft?: number | number[]

overflow?: 'visible' | 'hidden' | 'auto' | Array<'visible' | 'hidden' | 'auto'>overflow?: 'visible' | 'hidden' | 'auto' | Array<'visible' | 'hidden' | 'auto'>

padding?: number | number[]

paddingX?: number | number[]

paddingY?: number | number[]

paddingTop?: number | number[]

paddingRight?: number | number[]

paddingBottom?: number | number[]

paddingLeft?: number | number[]

radius?: number | number[]

gridRow?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>gridRow?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>

row?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>row?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>

deprecated

Use gridRow instead. Will be removed in v4.

gridRowStart?: 'auto' | number | Array<'auto' | number>gridRowStart?: 'auto' | number | Array<'auto' | number>

rowStart?: 'auto' | number | Array<'auto' | number>rowStart?: 'auto' | number | Array<'auto' | number>

deprecated

Use gridRowStart instead. Will be removed in v4.

gridRowEnd?: 'auto' | number | Array<'auto' | number>gridRowEnd?: 'auto' | number | Array<'auto' | number>

rowEnd?: 'auto' | number | Array<'auto' | number>rowEnd?: 'auto' | number | Array<'auto' | number>

deprecated

Use gridRowEnd instead. Will be removed in v4.

scheme?: 'light' | 'dark'

shadow?: number | number[]

sizing?: 'content' | 'border'

tone?: 'default' | 'transparent' | 'positive' | 'caution' | 'critical' | 'brand'tone?: 'default' | 'transparent' | 'positive' | 'caution' | 'critical' | 'brand'