Figma card header components

A card header is a small component with an outsized effect on how a screen reads. Put ten cards on a dashboard, give each one a header, and if the titles sit at slightly different heights or the action buttons land in different corners, the whole page looks wrong before anyone can explain why. This set is 1 card header component and 4 variants, built so that stops happening by accident.

What belongs in the top row

Three things, in this order: a title that names what the card holds, an optional supporting line that qualifies it, and the actions that apply to the card and nothing else.

That last constraint is the one teams break. A button in a card header must act on that card's content, so Export is fine on a revenue card and New project is not, because that belongs to the page. Material Design puts it plainly: cards display content and actions about a single subject. A card header carrying an action about a different subject has quietly become a page header.

Avatar on, avatar off

The property you will switch most is the avatar toggle. With it off, the header is 87px tall on desktop. With an avatar in the leading slot, 89px. Two pixels of difference, which tells you the avatar was sized to fit the row rather than the row stretched to fit the avatar.

Use the avatar version for anything owned by a person or a team, a shared report or an assigned project, and the plain version for everything else. If you need real faces in the mockup instead of grey circles, there are 370 free placeholder avatar photos built for exactly that.

1,216px on desktop, 375px on a phone

Desktop card headers are drawn at 1,216px, the content width of a 1,440px page. At 375px the same header runs 159px without an avatar and 141px with one, against 87px and 89px on desktop, because the title, the supporting text, and the actions each claim their own line. Deciding that stack once, inside the component, is what stops three developers inventing three different mobile card headers.

Everything is Auto Layout, so a two-line title pushes the row taller instead of shunting the buttons off the right edge; Figma's auto layout documentation covers the behavior if you are rebuilding the pattern yourself.

Cards, tables, and the header they share

This component sits on top of tables as often as it sits on cards, and the anatomy holds either way: the table gets a title, a row count or filter summary in the supporting line, and its actions on the right.

Underneath, a section footer takes pagination and bulk actions. Above the whole screen, the page header owns the page title and the one action the screen exists for. Three headers, three scopes, and a card header that starts competing with the page header is a sign the card wants to be its own screen. Every frame in the file is drawn twice, once light and once dark, so the dark version is a real design rather than an inverted screenshot.

When the design goes to build, the same headers exist in code. Untitled UI React card headers are open source, built with Tailwind CSS and React Aria, with the responsive title and action layout handled for you.