Cards

Cards contain content and actions that relate information about a subject.

Card with chart

Revenue
Pharma, inc.

Card with data

Akari Kitagawa
@akari
img
MJ
NS
MT
AL
JS

Cards in a collection

A card can hold anything from images to headlines, supporting text, buttons, lists, and decor components. A card can hold anything from images to headlines, supporting text, buttons, lists, and decor components

img
MJ
NS
MT
AL

Grand Hotel Mountain Hill Luxury Category

Сappadocia, Turkey

Component props

Name
Type
Description
headerNodeAdd the desired header by adding React.Fragment (<> ... </>) and content
srcStringSpecify a link to an image or a path to a static image
widthString or NumberSpecify the width of the image. "100%", "30vw", 240... is ok
heightString or NumberSpecify the height of the image. "100%", "30vw", 240... is ok
radiusNumberSpecify the radius of the image.
imgNodeAdd the desired image by adding React.Fragment (<> ... </>) and content
labelStringAdd text to the label
labelStyleStringSpecify additional styles if necessary
titleStringAdd text to the title
titleStyleStringSpecify additional styles if necessary
bodyStringAdd text to the body
bodyStyleStringSpecify additional styles if necessary
footerNodeAdd the desired footer by adding React.Fragment (<> ... </>) and content