Card

A flexible and extensible content container.

children

ReactNode

The content of the card

*Can't edit react node values here

Anatomy

<Card>
  <Card.Content> 
    {/* ... */}
  </Card.Content>
  {/* (Full-width sections can go here) */}
</Card>

Examples

Inputs inside

Input elements such as Button and Select that render inside cards have slightly elevated borders to make them stand out from the card background. This can be prevented by adding data-uui='false' to the <Card /> component.

Previous

Select

Next

Dialog