Card

A surface that groups related content and actions.

#Import

import {
  Card,
  CardBody,
  CardDesc,
  CardFooter,
  CardHead,
  CardTitle,
} from 'bmates-ui';

#Basic usage

The example below mirrors the primary Storybook composition and can be used as a starting point.

<Card>
  <CardHead>
    <CardTitle>Project status</CardTitle>
    <CardDesc>Updated just now</CardDesc>
  </CardHead>
  <CardBody>All systems are operational.</CardBody>
</Card>

#Preview

<Card>
  <CardHead>
    <CardTitle>Project status</CardTitle>
    <CardDesc>Updated just now</CardDesc>
  </CardHead>
  <CardBody>All systems are operational.</CardBody>
</Card>

#Prop previews

The examples below isolate the props that change visual output or interaction.

#Width and regions

<Card width={420}><CardHead>...</CardHead><CardBody>...</CardBody></Card>

#Component API

#Usage notes

• Every component in the table is exported from bmates-ui.
• Unless noted otherwise, a component also accepts the standard props of its underlying HTML element.
• For application-owned state, use a controlled value and its change handler instead of only a default* prop.