Card

Rectangular panel

Import

import { Card, CardBody } from '@windmill/react-ui'

Complete example

I think you'll understand better the following sections with a complete, contextualized example.

Revenue

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga, cum commodi a omnis numquam quod? Totam exercitationem quos hic ipsam at qui cum numquam, sed amet ratione! Ratione, nihil dolorum.

live editor

Card

The Card component defines some very basic styles, like background color and borders.

Lorem ipsum dolor sit amet
live editor

Colored

The Card component background colors can be overwritten by using the prop colored and setting new colors using a className.

Revenue

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga, cum commodi a omnis numquam quod? Totam exercitationem quos hic ipsam at qui cum numquam, sed amet ratione! Ratione, nihil dolorum.

live editor

Card body

The CardBody component also define some very basic styles (literally, it's just a p-4) and is required for a nice looking card. The benefit of not applying too much styling is that you get a very flexible component.

Revenue

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga, cum commodi a omnis numquam quod? Totam exercitationem quos hic ipsam at qui cum numquam, sed amet ratione! Ratione, nihil dolorum.

live editor

Props overview

PropDescriptionTypeDefault
coloredremove the default background colorsboolean

Customizing

See Customization to learn how to change defaultTheme styles.