CardHeader

Contains the card title. You can add an optional label or subtitle. The font sizes are automatically set by the Card size prop.

Figma componentStorybook documentation

Card label

Card title

This is a card subtitle

React

<CardHeader
  label="Card label"
  title="Card title"
  subtitle="This is a card subtitle"
/>

CSS

<div class="card_header">
  <p class="card_label">Card label</p>
  <p class="card_title">Card title</p>
  <p class="card_subtitle">Card subtitle</p>
</div>

Props

Actions

Card header with actions

React

<CardHeader
  title="Card title"
  actions={
    <>
      <Button color="error">Cancel</Button>
      <Button color="primary">Save</Button>
    </>
  }
/>

CSS

<div class="card_header">
  <p class="card_title">Card header with actions</p>
  <div class="card_headerActions">
    <button class="button button-error">Cancel</button>
    <button class="button button-primary">Save</button>
  </div>
</div>