Card
Often used for showing thumbnails or project previews.
import { Card, Image } from '@marvelapp/ui';Example
<Card width={200} height={150} overflow="hidden">
<Image alt="Image preview" maxWidth={320} src={thumbnail} width={1} />
</Card>Props
Prop
Type
Default
backgroundColor
array
string
number
–
bg
array
string
number
snow
border
array
string
number
–
borderBottom
array
string
number
–
borderColor
array
string
number
–
borderLeft
array
string
number
–
borderRadius
array
string
number
–
borderRight
array
string
number
–
borderStyle
array
string
number
–
borderTop
array
string
number
–
borderWidth
array
string
number
–
borderX
array
string
number
–
borderY
array
string
number
–
boxShadow
array
string
number
–
color
array
string
number
–
display
array
string
number
–
hasImage
boolean
true
height
array
string
number
–
iconSize
number
32
m
array
string
number
–
margin
array
string
number
–
marginBottom
array
string
number
–
marginLeft
array
string
number
–
marginRight
array
string
number
–
marginTop
array
string
number
–
marginX
array
string
number
–
marginY
array
string
number
–
maxHeight
array
string
number
–
maxWidth
array
string
number
–
mb
array
string
number
–
minHeight
array
string
number
–
minWidth
array
string
number
–
ml
array
string
number
–
mr
array
string
number
–
mt
array
string
number
–
mx
array
string
number
–
my
array
string
number
–
opacity
array
string
number
–
overflow
array
string
number
–
p
array
string
number
–
padding
array
string
number
–
paddingBottom
array
string
number
–
paddingLeft
array
string
number
–
paddingRight
array
string
number
–
paddingTop
array
string
number
–
paddingX
array
string
number
–
paddingY
array
string
number
–
pb
array
string
number
–
pl
array
string
number
–
pr
array
string
number
–
pt
array
string
number
–
px
array
string
number
–
py
array
string
number
–
size
array
string
number
–
textShadow
array
string
number
–
verticalAlign
array
string
number
–
width
array
string
number
–