Sanity UI
Docs
Arcade
Migrate to v4
  1. Docs
  2. Primitives
  3. Card

<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.

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'
Made withby folks at