Component reference

CardHeader

The top of a card: its title, description and actions.

Preview

Title, actions, and real container width

A wide card and a narrow sidebar in the same window share the title layout; nested cards, intrinsic button cards, and optional descriptions keep their native structure.

packages/meowtail/stories/card-responsive.stories.tsxline 27tsx

render: () => (
  <Measure width="wide">
    <Stack gap="relaxed">
      <Card data-card-responsive="wide">
        <CardHeader>
          <CardTitle>
            Workspace settings and access rules to verify — A long workspace configuration title
          </CardTitle>
          <CardDescription>
            Changes keep existing content; save after the review is complete.
          </CardDescription>
          <CardAction>
            <Button>View full configuration</Button>
            <Button variant="quiet">Copy configuration link</Button>
          </CardAction>
        </CardHeader>
        <CardContent>
          <Card data-card-responsive="nested">
            <CardHeader>
              <CardTitle>Default nested check item</CardTitle>
              <CardDescription>
                Embedded relationships still share the parent surface.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Field label="Kept draft" htmlFor="card-responsive-draft">
                <Input id="card-responsive-draft" />
              </Field>
            </CardContent>
          </Card>
        </CardContent>
      </Card>
      <div style={{ width: "300px", maxWidth: "100%" }}>
        <Card data-card-responsive="sidebar">
          <CardHeader>
            <CardAction>
              <Button>View details</Button>
              <Button variant="quiet">Copy link</Button>
            </CardAction>
            <CardTitle>A long sidebar card title with meaningful information</CardTitle>
            <CardDescription>
              A narrow region in the same wide window; actions precede the title in the DOM.
            </CardDescription>
          </CardHeader>
        </Card>
      </div>
      <Inline align="start">
        <Card as="button" data-card-responsive="button">
          <CardHeader>
            <CardTitle>Header-only button card</CardTitle>
            <CardDescription>Content decides the natural width.</CardDescription>
          </CardHeader>
        </Card>
        <Card data-card-responsive="intrinsic">
          <CardHeader>
            <CardTitle>Intrinsic inline card</CardTitle>
            <CardDescription>No hand-written width.</CardDescription>
          </CardHeader>
        </Card>
      </Inline>
      <Card data-card-responsive="title-only">
        <CardHeader>
          <CardTitle>No empty description row when there is only a title</CardTitle>
          <CardAction>
            <Button>Check results</Button>
          </CardAction>
        </CardHeader>
      </Card>
    </Stack>
  </Measure>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { CardHeader } from "meowtail";

<CardHeader>
  <CardTitle>
    Workspace settings and access rules to verify — A long workspace configuration title
  </CardTitle>
  <CardDescription>
    Changes keep existing content; save after the review is complete.
  </CardDescription>
  <CardAction>
    <Button>View full configuration</Button>
    <Button variant="quiet">Copy configuration link</Button>
  </CardAction>
</CardHeader>

API reference

Props

Also takes className, children and the attributes and events of its root element.

DOM parts

root

Registry

The component is registered as card-header in the meowtail component registry.