React UI
Edit page
Home
Getting Started
Customize
Foundation
Components: UI
Alert Badge Button ButtonGroup Card
Basic Usage General Guidelines Card Composition Raised Card Bordered Card Dense Card Variants States API CardBody CardFooter CheckboxField Modal Radio ScrollView SelectField Table TextArea TextField Toggle
Components: Layouts
CSS Helpers
Readme

# Card

Cards contain content and actions about a single subject.

##
Basic Usage

To implement the Card component, you need to import at least Card and
CardBody components:

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

And use it:

Hello!
<Card> <CardBody>Hello!</CardBody> </Card>

    <Card>  <CardBody>Hello!</CardBody></Card>

See API for all available options.

## General Guidelines

- The default (flat) card is
  designed for a non-white background. You may want to either use a different variant or customize the default appearance to make it stand out on white surfaces.

- The CardBody component is the only required element in a card. CardFooter is optional.

- Use medium or low-emphasis buttons when there are more cards, eg. in a grid. It will help you keep the UI clean and easy to scan.

## Card Composition

Aside from the mandatory CardBody element, you can add a CardFooter to better separate your card's actions from the rest of the content.

Import all necessary components:

    import { Card, CardBody, CardFooter } from '@react-ui-org/react-ui';

And use them:

Hello! I'm card with a footer.
<Card> <CardBody>Hello! I&apos;m card with a footer.</CardBody> <CardFooter> <Button label="Read more" priority="outline" /> </CardFooter> </Card>

    <Card>  <CardBody>Hello! I&apos;m card with a footer.</CardBody>  <CardFooter>    <Button label="Read more" priority="outline" />  </CardFooter></Card>

👉 CardFooter is required in case you need to align the actions of multiple cards with varying height of content.

## Raised Card

Add optional shadow to lift the card above surface.

Hello! I'm a raised card with a footer.
<Card raised> <CardBody>Hello! I&apos;m a raised card with a footer.</CardBody> <CardFooter> <Button label="Read more" priority="outline" /> </CardFooter> </Card>

    <Card raised>  <CardBody>Hello! I&apos;m a raised card with a footer.</CardBody>  <CardFooter>    <Button label="Read more" priority="outline" />  </CardFooter></Card>

## Bordered Card

Use a border when you need to visually separate the card from its background.

Hello! I'm card with a border and a footer.
Hello! I'm a raised card with a border and a footer.
<Card type="bordered"> <CardBody>Hello! I&apos;m card with a border and a footer.</CardBody> <CardFooter> <Button label="Read more" priority="outline" /> </CardFooter> </Card> <Card type="bordered" raised> <CardBody> Hello! I&apos;m a raised card with a border and a footer. </CardBody> <CardFooter> <Button label="Read more" priority="outline" /> </CardFooter> </Card>

    <Card type="bordered">  <CardBody>Hello! I&apos;m card with a border and a footer.</CardBody>  <CardFooter>    <Button label="Read more" priority="outline" />  </CardFooter></Card><Card type="bordered" raised>  <CardBody>    Hello! I&apos;m a raised card with a border and a footer.  </CardBody>  <CardFooter>    <Button label="Read more" priority="outline" />  </CardFooter></Card>

## Dense Card

Use a dense card when you need to save space on screen. Other elements in the card should be also smaller to keep the card contained and easy to scan.

Hello! I'm a dense card. Everything is smaller here.
<Card dense raised> <CardBody> <small>Hello! I&apos;m a dense card. Everything is smaller here.</small> </CardBody> <CardFooter> <Button label="Read more" priority="outline" size="small" /> </CardFooter> </Card>

    <Card dense raised>  <CardBody>    <small>Hello! I&apos;m a dense card. Everything is smaller here.</small>  </CardBody>  <CardFooter>    <Button label="Read more" priority="outline" size="small" />  </CardFooter></Card>

## Variants

All UI colors (success, warning, error, help, info, and note) are supported by cards to cover various needs of your app. The bordered card type is forced automatically to make sure the border is visible.

Hello! I'm success variant of card.
Hello! I'm warning variant of card.
Hello! I'm error variant of card.
Hello! I'm help variant of card.
Hello! I'm info variant of card.
Hello! I'm note variant of card.
<Card type="success"> <CardBody>Hello! I&apos;m success variant of card.</CardBody> <CardFooter> <Button label="Read more" priority="outline" variant="success" /> </CardFooter> </Card> <Card type="warning"> <CardBody>Hello! I&apos;m warning variant of card.</CardBody> <CardFooter> <Button label="Read more" priority="outline" variant="warning" /> </CardFooter> </Card> <Card type="error"> <CardBody>Hello! I&apos;m error variant of card.</CardBody> <CardFooter> <Button label="Read more" priority="outline" variant="danger" /> </CardFooter> </Card> <Card type="help"> <CardBody>Hello! I&apos;m help variant of card.</CardBody> <CardFooter> <Button label="Read more" priority="outline" variant="dark" /> </CardFooter> </Card> <Card type="info"> <CardBody>Hello! I&apos;m info variant of card.</CardBody> <CardFooter> <Button label="Read more" priority="outline" variant="dark" /> </CardFooter> </Card> <Card type="note"> <CardBody>Hello! I&apos;m note variant of card.</CardBody> <CardFooter> <Button label="Read more" priority="outline" variant="dark" /> </CardFooter> </Card>

    <Card type="success">  <CardBody>Hello! I&apos;m success variant of card.</CardBody>  <CardFooter>    <Button label="Read more" priority="outline" variant="success" />  </CardFooter></Card><Card type="warning">  <CardBody>Hello! I&apos;m warning variant of card.</CardBody>  <CardFooter>    <Button label="Read more" priority="outline" variant="warning" />  </CardFooter></Card><Card type="error">  <CardBody>Hello! I&apos;m error variant of card.</CardBody>  <CardFooter>    <Button label="Read more" priority="outline" variant="danger" />  </CardFooter></Card><Card type="help">  <CardBody>Hello! I&apos;m help variant of card.</CardBody>  <CardFooter>    <Button label="Read more" priority="outline" variant="dark" />  </CardFooter></Card><Card type="info">  <CardBody>Hello! I&apos;m info variant of card.</CardBody>  <CardFooter>    <Button label="Read more" priority="outline" variant="dark" />  </CardFooter></Card><Card type="note">  <CardBody>Hello! I&apos;m note variant of card.</CardBody>  <CardFooter>    <Button label="Read more" priority="outline" variant="dark" />  </CardFooter></Card>

## States

### Disabled State

An entire card can appear disabled. However, you'll still need to manually disable its interactive elements to disallow user's interaction.

Hello! I'm a disabled card.
Hello! I'm a disabled raised card.
Hello! I'm a disabled bordered card.
Hello! I'm a disabled success variant of card.
<Card disabled> <CardBody>Hello! I&apos;m a disabled card.</CardBody> <CardFooter> <Button label="Read more" priority="outline" disabled /> </CardFooter> </Card> <Card disabled raised> <CardBody>Hello! I&apos;m a disabled raised card.</CardBody> <CardFooter> <Button label="Read more" priority="outline" disabled /> </CardFooter> </Card> <Card variant="bordered" disabled> <CardBody>Hello! I&apos;m a disabled bordered card.</CardBody> <CardFooter> <Button label="Read more" priority="outline" disabled /> </CardFooter> </Card> <Card type="success" disabled> <CardBody>Hello! I&apos;m a disabled success variant of card.</CardBody> <CardFooter> <Button label="Read more" priority="outline" variant="success" disabled /> </CardFooter> </Card>

    <Card disabled>  <CardBody>Hello! I&apos;m a disabled card.</CardBody>  <CardFooter>    <Button label="Read more" priority="outline" disabled />  </CardFooter></Card><Card disabled raised>  <CardBody>Hello! I&apos;m a disabled raised card.</CardBody>  <CardFooter>    <Button label="Read more" priority="outline" disabled />  </CardFooter></Card><Card variant="bordered" disabled>  <CardBody>Hello! I&apos;m a disabled bordered card.</CardBody>  <CardFooter>    <Button label="Read more" priority="outline" disabled />  </CardFooter></Card><Card type="success" disabled>  <CardBody>Hello! I&apos;m a disabled success variant of card.</CardBody>  <CardFooter>    <Button label="Read more" priority="outline" variant="success" disabled />  </CardFooter></Card>

## API

children
node
required
dense
bool
false
disabled
bool
false
id
string
undefined
raised
bool
false
type
'success' │ 'warning' │ 'error' │ 'help' │ 'info' │ 'note'
null
variant
'flat' │ 'bordered'
'flat'

## CardBody

CardBody is the only required element in a card. See Card Composition for all details.

children
node
required

## CardFooter

Separate your card actions with CardFooter. See Card Composition for all details.

children
node
required

Next: CheckboxField →