Card

Container for related content and actions.

Basic card

Card Title

This is the card body content. It can contain any HTML.

Footer content
tsx
<Card
  title="Card Title"
  footer="<span>Footer content</span>"
>
  {'<p>This is the card body content.</p>'}
</Card>

With subtitle and actions

Dashboard

Overview of your account

Key metrics and activity are shown here.

tsx
<Card
  title="Dashboard"
  subtitle="Overview of your account"
  actions={'<button class="button button--variant-outline button--theme-default button--size-sm">Edit</button>'}
>
  {'<p>Key metrics and activity.</p>'}
</Card>

Body-only card

A minimal card with just a body.

tsx
<Card>{'<p>A minimal card with just a body.</p>'}</Card>