Card

Live example


Properties

Name

Values

Default

variant

'surface' | 'destructive' | 'outline' | 'outline-variant'

outline

children

ReactNode

 

inverted

DEPRECATED

 

inline

DEPRECATED

 

...

JSX.IntrinsicElements["div"]

 

Native Properties

Name

Values

Default

displayStyle

'default' | 'outline'

'default'

background

ImageSourcePropType | string

 

size

{
width: number | string;
height: number | string;
}

 

onPress

() => void

 

onSelect

() => void

 

children

ReactNode

 


Composition

Card composition 1

Tokens

Native

Web

Background color

color.surface.bright

color-surface-bright

Border radius

border.radius[largeAndUp ? '2xl' : 'lg']

border-radius-2xl

Border Width (outline)

border.width.md

border-width-md

Padding

space[400]

space-600