Card headers

The title bar of a card: title, badge, description, avatar, and two trailing slots that differ below desktop. Extracted from the vendored table per ADR-0001.

Specimen

Guidelines

Code

Demo

hero

Team members

10/20 seats

Manage your team members and their account permissions here.

import { CardHeader } from "@/components/application/card-header/card-header"; import { Button } from "@/components/base/buttons/button"; import { Dropdown } from "@/components/base/dropdown/dropdown"; <CardHeader title="Team members" titleAs="h3" badge="10/20 seats" description="Manage your team members and their account permissions here." actions={<><Button color="secondary" size="sm">Secondary</Button><Button size="sm">Primary</Button></>} contentTrailing={ <Dropdown.Root> <Dropdown.DotsButton aria-label="Team member options" /> <Dropdown.Popover className="w-min"> <Dropdown.Menu> <Dropdown.Item>View profile</Dropdown.Item> </Dropdown.Menu> </Dropdown.Popover> </Dropdown.Root> } />

In context

in-context

View in a page

Family

family

Invoices

Every invoice on this account.

CardHeader

Invoices

Every invoice on this account.

TableCard.Header

Types

cells

The sheet’s Avatar axis, every other part on.

Team members

10/20 seats

Manage your team members and their account permissions here.

avatar off

Olivia Rhye

New user

olivia@drumkit.design

avatar on

Sizes

cells

Team members

10/20 seats

Manage your team members and their account permissions here.

size sm

Team members

10/20 seats

Manage your team members and their account permissions here.

size md

Layouts

cells

The trailing slots

Team members

10/20 seats

Manage your team members and their account permissions here.

actions only

Team members

10/20 seats

Manage your team members and their account permissions here.

contentTrailing only: the overflow menu

Team members

10/20 seats

Manage your team members and their account permissions here.

both: actions first, then contentTrailing

Team members

10/20 seats

Manage your team members and their account permissions here.

neither: the text block alone

The rule

Team members

10/20 seats

Manage your team members and their account permissions here.

divider off, the default

Team members

10/20 seats

Manage your team members and their account permissions here.

divider on

Content

cells

Team members

title alone

Team members

10/20 seats

title and badge

Team members

Manage your team members and their account permissions here.

title and description

Team members

Active

Manage your team members and their account permissions here.

badge as an element

Quarterly invoices, credit notes and pending refunds across every workspace

Draft

Manage your team members and their account permissions here.

a long title wraps

Team members

10/20 seats

Manage your team members, their roles, their seats and their account permissions, and see who is still waiting on an invitation.

a long description wraps

Olivia Rhye

New user

avatar, no description: the title centres

Olivia Rhye

New user

olivia@drumkit.design

avatar from initials

Olivia Rhye

New user

olivia@drumkit.design

avatar with the verified tick

Invoices

Updated 2 hours ago

record meta as the description

Compositions

cells

Team members

10/20 seats

Manage your team members and their account permissions here.

a card: the shell, the header with divider, the body

Invoices

Every invoice on this account.

TableCard.Header inside TableCard.Root, size sm

Behaviour

cells

Below md, in real viewports: the row wraps.

Below md

actions on their own row, the menu beside the title

a close button stays beside the title

avatar on: the row wraps under the avatar

no actions: one row

Loading

cells

Cells

avatar off, actions and menu real

avatar on, actions and menu real