<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 . IntrinsicElementscolumn?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>columnStart?: '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'>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 [ ] row?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>rowStart?: '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'column? : 'auto' | 'full' | number | Array < 'auto' | 'full' | number >
columnStart? : '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' >
row? : 'auto' | 'full' | number | Array < 'auto' | 'full' | number >
rowStart? : '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 . IntrinsicElementscolumn?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>columnStart?: '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'>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 [ ] row?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>rowStart?: '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'column? : 'auto' | 'full' | number | Array < 'auto' | 'full' | number >
columnStart? : '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' >
row? : 'auto' | 'full' | number | Array < 'auto' | 'full' | number >
rowStart? : 'auto' | number | Array < 'auto' | number >
rowEnd? : 'auto' | number | Array < 'auto' | number >
tone? : 'default' | 'transparent' | 'positive' | 'caution' | 'critical' | 'brand'