Card

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>
  <CardBody>
    <p className="mb-4 font-semibold text-gray-600 dark:text-gray-300">Revenue</p>
    <p className="text-gray-600 dark:text-gray-400">
      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.
    </p>
  </CardBody>
</Card>

<Card>
  <CardBody>
    <p className="mb-4 font-semibold text-gray-600 dark:text-gray-300">Revenue</p>
    <p className="text-gray-600 dark:text-gray-400">
      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.
    </p>
  </CardBody>
</Card>

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

Lorem ipsum dolor sit amet

live editor

<Card>Lorem ipsum dolor sit amet</Card>

<Card>Lorem ipsum dolor sit amet</Card>

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 colored className="bg-purple-600">
  <CardBody>
    <p className="mb-4 font-semibold text-white">Revenue</p>
    <p className="text-white">
      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.
    </p>
  </CardBody>
</Card>

<Card colored className="bg-purple-600">
  <CardBody>
    <p className="mb-4 font-semibold text-white">Revenue</p>
    <p className="text-white">
      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.
    </p>
  </CardBody>
</Card>

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

<Card className="flex h-48">
  <img className="object-cover w-1/3" src="/img/forest.jpeg" />
  <CardBody>
    <p className="mb-4 font-semibold text-gray-600 dark:text-gray-300">Revenue</p>
    <p className="text-gray-600 dark:text-gray-400">
      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.
    </p>
  </CardBody>
</Card>

<Card className="flex h-48">
  <img className="object-cover w-1/3" src="/img/forest.jpeg" />
  <CardBody>
    <p className="mb-4 font-semibold text-gray-600 dark:text-gray-300">Revenue</p>
    <p className="text-gray-600 dark:text-gray-400">
      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.
    </p>
  </CardBody>
</Card>

Props overview

Prop	Description	Type	Default
`colored`	remove the default background colors	`boolean`

Customizing

See Customization to learn how to change defaultTheme styles.