<Card />The Card component acts much like a Box, but with a background and foreground color. Components within a Card inherit its colors.
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.
as ? : React. ElementType | keyof JSX . IntrinsicElementsgridColumn?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>column?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>Use gridColumn instead. Will be removed in v4.
gridColumnStart?: 'auto' | number | Array<'auto' | number>columnStart?: 'auto' | number | Array<'auto' | number>Use gridColumnStart instead. Will be removed in v4.
gridColumnEnd?: 'auto' | number | Array<'auto' | number>columnEnd?: 'auto' | number | Array<'auto' | number>Use gridColumnEnd instead. Will be removed in v4.
display?: 'none' | 'block' | 'grid' | 'flex' | 'inline-block' | Array<'none' | 'block' | 'grid' | 'flex' | 'inline-block'>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>Use gridRow instead. Will be removed in v4.
gridRowStart?: 'auto' | number | Array<'auto' | number>rowStart?: 'auto' | number | Array<'auto' | number>Use gridRowStart instead. Will be removed in v4.
gridRowEnd?: 'auto' | number | Array<'auto' | number>rowEnd?: 'auto' | number | Array<'auto' | number>Use gridRowEnd instead. Will be removed in v4.
scheme? : 'light' | 'dark' shadow? : number | number [ ] sizing? : 'content' | 'border' tone?: 'default' | 'transparent' | 'positive' | 'caution' | 'critical' | 'brand'gridColumn? : 'auto' | 'full' | number | Array < 'auto' | 'full' | number >
column? : 'auto' | 'full' | number | Array < 'auto' | 'full' | number >
gridColumnStart? : 'auto' | number | Array < 'auto' | number >
columnStart? : 'auto' | number | Array < 'auto' | number >
gridColumnEnd? : 'auto' | number | Array < 'auto' | number >
columnEnd? : 'auto' | number | Array < 'auto' | number >
display? : 'none' | 'block' | 'grid' | 'flex' | 'inline-block' | Array < 'none' | 'block' | 'grid' | 'flex' | 'inline-block' >
height? : 'stretch' | 'fill' | Array < 'stretch' | 'fill' >
overflow? : 'visible' | 'hidden' | 'auto' | Array < 'visible' | 'hidden' | 'auto' >
gridRow? : 'auto' | 'full' | number | Array < 'auto' | 'full' | number >
row? : 'auto' | 'full' | number | Array < 'auto' | 'full' | number >
gridRowStart? : 'auto' | number | Array < 'auto' | number >
rowStart? : 'auto' | number | Array < 'auto' | number >
gridRowEnd? : 'auto' | number | Array < 'auto' | number >
rowEnd? : 'auto' | number | Array < 'auto' | number >
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.
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.
as?: React.ElementType | keyof JSX.IntrinsicElementsgridColumn?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>column?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>Use gridColumn instead. Will be removed in v4.
gridColumnStart?: 'auto' | number | Array<'auto' | number>columnStart?: 'auto' | number | Array<'auto' | number>Use gridColumnStart instead. Will be removed in v4.
gridColumnEnd?: 'auto' | number | Array<'auto' | number>columnEnd?: 'auto' | number | Array<'auto' | number>Use gridColumnEnd instead. Will be removed in v4.
display?: 'none' | 'block' | 'grid' | 'flex' | 'inline-block' | Array<'none' | 'block' | 'grid' | 'flex' | 'inline-block'>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>Use gridRow instead. Will be removed in v4.
gridRowStart?: 'auto' | number | Array<'auto' | number>rowStart?: 'auto' | number | Array<'auto' | number>Use gridRowStart instead. Will be removed in v4.
gridRowEnd?: 'auto' | number | Array<'auto' | number>rowEnd?: 'auto' | number | Array<'auto' | number>Use gridRowEnd instead. Will be removed in v4.
scheme?: 'light' | 'dark'shadow?: number | number[]sizing?: 'content' | 'border'tone?: 'default' | 'transparent' | 'positive' | 'caution' | 'critical' | 'brand'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 >
gridColumnStart? : 'auto' | number | Array < 'auto' | number >
columnStart? : 'auto' | number | Array < 'auto' | number >
gridColumnEnd? : 'auto' | number | Array < 'auto' | number >
columnEnd? : 'auto' | number | Array < 'auto' | number >
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 >
gridRowStart? : 'auto' | number | Array < 'auto' | number >
rowStart? : 'auto' | number | Array < 'auto' | number >
gridRowEnd? : 'auto' | number | Array < 'auto' | number >
rowEnd? : 'auto' | number | Array < 'auto' | number >
scheme? : 'light' | 'dark'
shadow? : number | number [ ]
sizing? : 'content' | 'border'
tone? : 'default' | 'transparent' | 'positive' | 'caution' | 'critical' | 'brand'