Figma card header components | Untitled UI
Card header design in Figma: the anatomy of a card's top row
How these card header components are built in Figma, and what actions belong in the top row itself.
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.
FAQs
Frequently asked questions
Common questions about the Untitled UI Figma card header components, covering avatars and actions.
What is the difference between a card header and a section header?
The container. A card header lives inside the card's border and shares its padding, which is why it reads as part of the card. A section header sits on the page itself and can label several cards at once.
If the title needs to describe more than one card, move it out to a section header rather than promoting one card's header.
Should there be a divider under a card header?
Only when the content underneath starts immediately, like a table with its own header row. For a card of loose content, spacing does the separating job better and keeps the card quieter. A line plus generous padding is doing the same work twice.
When you do want one, use the content divider component so the weight matches everywhere.
How many actions should a card header hold?
Two visible at most, and often one. A card is a small surface, and every button in its header competes with the page's own primary action for attention. Anything beyond two belongs behind a menu icon on the right, which keeps the row from wrapping on mobile.
On a 375px screen the header already stacks to 159px, and extra buttons make it worse.
Are these card header components included in the free version?
The card headers are part of the paid Untitled UI Figma kit. See pricing for the full contents.
The 100% free Figma UI kit covers core components from the same system, which is a reasonable way to check the spacing and type scale before buying.
Is there a React version of these card headers?
Yes. Untitled UI React card headers are open source, built with Tailwind CSS and React Aria, and mirror these Figma components.
They include the avatar variant and the mobile stacking behavior.
Figma UI components
Foundation Figma components and styles
Icons, styles, design annotations—everything you need to build the foundation of a great Figma design system.
\ \ Color styles \ \ 333 styles](/content/components/color-styles/index.html)
\ \ Typography styles \ \ 44 styles](/content/components/typography-styles/index.html)
\ \ Logos \ \ 3 components + 372 variants](/content/components/logos/index.html)
\ \ Icons \ \ 1,993 components + 352 variants](/content/components/icons/index.html)
\ \ Shadows & blurs \ \ 18 styles](/content/components/shadows-blurs/index.html)
\ \ Grids & spacing \ \ 38 variants + 8 styles](/content/components/grids-spacing/index.html)
\ \ File type icons \ \ 1 component + 153 variants](/content/components/file-icons/index.html)
\ \ Social icons \ \ 1 component + 102 variants](/content/components/social-icons/index.html)
\ \ Folder icons \ \ 1 component + 8 variants](/content/components/folder-icons/index.html)
\ \ Payment icons \ \ 1 component + 112 variants](/content/components/payment-icons/index.html)
\ \ Country flag icons \ \ 261 components + 783 variants](/content/components/flag-icons/index.html)
\ \ Integration icons \ \ 1 component + 32 variants](/content/components/integration-icons/index.html)
\ \ Cursors \ \ 1 component + 50 variants](/content/components/cursors/index.html)
Figma UI components
Figma base components
Buttons, inputs, avatars—all of the base components you need for modern product design and websites.
\ \ Avatars \ \ 280 variants + 98 styles](/content/components/avatars/index.html)
\ \ Badges \ \ 3 components + 666 variants](/content/components/badges/index.html)
\ \ Button groups \ \ 2 components + 64 variants](/content/components/button-groups/index.html)
\ \ Buttons \ \ 5 components + 940 variants](/content/components/buttons/index.html)
\ \ Checkboxes \ \ 2 components + 72 variants](/content/components/checkboxes/index.html)
\ \ Context menus \ \ 2 components + 32 variants](/content/components/context-menus/index.html)
\ \ Dropdowns \ \ 4 components + 143 variants](/content/components/dropdowns/index.html)
\ \ Inputs \ \ 7 components + 188 variants](/content/components/inputs/index.html)
\ \ Multi-select \ \ 4 components + 21 variants](/content/components/multi-select/index.html)
\ \ Progress indicators \ \ 2 components + 65 variants](/content/components/progress-indicators/index.html)
\ \ Radio groups \ \ 2 components + 168 variants](/content/components/radio-groups/index.html)
\ \ Select \ \ 6 components + 90 variants](/content/components/select/index.html)
\ \ Sliders \ \ 2 components + 39 variants](/content/components/sliders/index.html)
\ \ Tags \ \ 4 components + 210 variants](/content/components/tags/index.html)
\ \ Toggles \ \ 2 components + 64 variants](/content/components/toggles/index.html)
\ \ Tooltips \ \ 2 components + 84 variants](/content/components/tooltips/index.html)
Figma UI components
Shared Figma assets
Device mockups and useful utility pages—all of the shared assets you need for modern product design and websites.
\ \ 404 page headers \ \ 1 component + 28 variants](/content/components/404-page-headers/index.html)
\ \ Banners \ \ 1 component + 40 variants](/content/components/banners/index.html)
\ \ Credit cards \ \ 1 component + 13 variants](/content/components/credit-cards/index.html)
\ \ Design annotations \ \ 7 components + 38 variants](/content/components/design-annotations/index.html)
\ \ Device mockups \ \ 7 components + 18 variants](/content/components/device-mockups/index.html)
\ \ Email templates \ \ 3 components + 22 variants](/content/components/email-templates/index.html)
\ \ Forgot password headers \ \ 1 component + 10 variants](/content/components/forgot-password-headers/index.html)
\ \ Log in page headers \ \ 1 components + 32 variants](/content/components/log-in-headers/index.html)
\ \ Miscellaneous assets \ \ 3 components + 50 variants](/content/components/miscellaneous-assets/index.html)
\ \ Portfolio mockups \ \ 6 variants + 52 templates](/content/components/portfolio-mockups/index.html)
\ \ Sign up page headers \ \ 1 component + 42 variants](/content/components/sign-up-headers/index.html)
\ \ Verification page headers \ \ 1 component + 6 variants](/content/components/verification-headers/index.html)
\ \ Video players \ \ 3 components + 36 variants](/content/components/video-players/index.html)
Figma UI components
Application UI/Dashboard examples
Dashboard, settings, form layouts—useful examples for everything you need to design modern dashboards and products.
\ \ Dashboard examples \ \ 60 page examples](/content/components/dashboards/index.html)
\ \ Informational page examples \ \ 60 page examples](/content/components/informational-pages/index.html)
\ \ Settings page examples \ \ 42 page examples](/content/components/settings-pages/index.html)
Figma UI components
Application UI/Dashboard Figma components
Modals, tables, alerts—everything you need to design modern and beautiful apps, dashboards and products.
\ \ Activity feeds \ \ 2 components + 22 variants](/content/components/activity-feeds/index.html)
\ \ Activity gauges \ \ 3 components + 34 variants](/content/components/activity-gauges/index.html)
\ \ Alerts \ \ 1 component + 24 variants](/content/components/alerts/index.html)
\ \ Application header navigations \ \ 5 components + 80 variants](/content/components/application-header-navigations/index.html)
\ \ Breadcrumbs \ \ 2 components + 56 variants](/content/components/breadcrumbs/index.html)
\ \ Calendars \ \ 12 components + 82 variants](/content/components/calendars/index.html)
\ \ Card headers \ \ 1 component + 4 variants](/content/components/card-headers/index.html)
\ \ Carousels \ \ 4 components + 22 variants](/content/components/carousels/index.html)
\ \ Code snippets \ \ 1 component + 8 variants](/content/components/code-snippets/index.html)
\ \ Color pickers \ \ 6 components + 26 variants](/content/components/color-pickers/index.html)
\ \ Command menus (⌘+K) \ \ 5 components + 69 variants](/content/components/command-menus/index.html)
\ \ Content dividers \ \ 1 component + 18 variants](/content/components/content-dividers/index.html)
\ \ Date pickers \ \ 5 components + 68 variants](/content/components/date-pickers/index.html)
\ \ Drawers \ \ 2 components + 50 variants](/content/components/drawers/index.html)
\ \ Empty states \ \ 2 components + 36 variants](/content/components/empty-states/index.html)
\ \ File uploaders \ \ 3 components + 23 variants](/content/components/file-uploaders/index.html)
\ \ Filters \ \ 3 components + 38 variants](/content/components/filters/index.html)
\ \ Horizontal tabs \ \ 2 components + 280 variants](/content/components/horizontal-tabs/index.html)
\ \ Inline CTAs \ \ 1 component + 14 variants](/content/components/inline-ctas/index.html)
\ \ Line & bar charts \ \ 9 components + 116 variants](/content/components/line-bar-charts/index.html)
\ \ Loading indicators \ \ 1 component + 12 variants](/content/components/loading-indicators/index.html)
\ \ Messaging \ \ 3 components + 42 variants](/content/components/messaging/index.html)
\ \ Metrics \ \ 4 components + 36 variants](/content/components/metrics/index.html)
\ \ Modals \ \ 3 components + 252 variants](/content/components/modals/index.html)
\ \ Notifications \ \ 1 component + 18 variants](/content/components/notifications/index.html)
\ \ Page headers \ \ 1 component + 12 variants](/content/components/page-headers/index.html)
\ \ Pagination \ \ 3 components + 42 variants](/content/components/pagination/index.html)
\ \ Pie charts \ \ 3 components + 68 variants](/content/components/pie-charts/index.html)
\ \ Progress circles \ \ 1 component + 10 variants](/content/components/progress-circles/index.html)
\ \ Progress steps \ \ 7 components + 92 variants](/content/components/progress-steps/index.html)
\ \ Radar charts \ \ 3 components + 12 variants](/content/components/radar-charts/index.html)
\ \ Section footers \ \ 1 component + 8 variants](/content/components/section-footers/index.html)
\ \ Section headers \ \ 1 component + 12 variants](/content/components/section-headers/index.html)
\ \ Sidebar navigations \ \ 9 components + 168 variants](/content/components/sidebar-navigations/index.html)
\ \ Tables \ \ 4 components + 204 variants](/content/components/tables/index.html)
\ \ Tree views \ \ 3 components + 4 variants](/content/components/tree-views/index.html)
\ \ Vertical tabs \ \ 2 components + 264 variants](/content/components/vertical-tabs/index.html)
Figma UI components
Marketing website examples
Landing pages, blogs, sign up pages—useful examples for everything you need to design modern marketing websites.
\ \ 404 page examples \ \ 20 page examples](/content/components/404-pages/index.html)
\ \ About page examples \ \ 20 page examples](/content/components/about-pages/index.html)
\ \ Blog examples \ \ 20 page examples](/content/components/blogs/index.html)
\ \ Blog post examples \ \ 20 page examples](/content/components/blog-posts/index.html)
\ \ Contact page examples \ \ 20 page examples](/content/components/contact-pages/index.html)
\ \ FAQ page examples \ \ 20 page examples](/content/components/faq-page-examples/index.html)
\ \ Landing page examples \ \ 40 page examples](/content/components/landing-pages/index.html)
\ \ Legal page examples \ \ 10 page examples](/content/components/legal-pages/index.html)
\ \ Log in page examples \ \ 12 page examples](/content/components/log-in-pages/index.html)
\ \ Pricing page examples \ \ 20 page examples](/content/components/pricing-pages/index.html)
\ \ Sign up page examples \ \ 12 page examples](/content/components/sign-up-pages/index.html)
\ \ Team page examples \ \ 20 page examples](/content/components/team-pages/index.html)
Figma UI components
Marketing website components
Landing page header and website sections—everything you need to design modern and responsive marketing websites.
\ \ Blog post sections \ \ 3 components + 102 variants](/content/components/blog-post-sections/index.html)
\ \ Blog sections \ \ 4 components + 84 variants](/content/components/blog-sections/index.html)
\ \ Careers sections \ \ 2 components + 38 variants](/content/components/careers-sections/index.html)
\ \ Contact sections \ \ 6 components + 106 variants](/content/components/contact-sections/index.html)
\ \ Content & rich text sections \ \ 2 components + 78 variants](/content/components/content-sections/index.html)
\ \ CTA sections \ \ 1 component + 60 variants](/content/components/cta-sections/index.html)
\ \ FAQ sections \ \ 2 components + 72 variants](/content/components/faq-sections/index.html)
\ \ Features sections \ \ 2 components + 122 variants](/content/components/features-sections/index.html)
\ \ Footers \ \ 5 components + 192 variants](/content/components/footers/index.html)
\ \ Header navigations \ \ 10 components + 397 variants](/content/components/header-navigations/index.html)
\ \ Header sections \ \ 2 components + 148 variants](/content/components/header-sections/index.html)
\ \ Metrics sections \ \ 2 components + 42 variants](/content/components/metrics-sections/index.html)
\ \ Newsletter CTA sections \ \ 1 component + 32 variants](/content/components/newsletter-cta-sections/index.html)
\ \ Press mentions sections \ \ 1 component + 4 variants](/content/components/press-mentions-sections/index.html)
\ \ Pricing sections \ \ 5 components + 88 variants](/content/components/pricing-sections/index.html)
\ \ Social proof sections \ \ 1 component + 20 variants](/content/components/social-proof-sections/index.html)
\ \ Team sections \ \ 2 components + 56 variants](/content/components/team-sections/index.html)
\ \ Testimonial sections \ \ 3 components + 92 variants](/content/components/testimonial-sections/index.html)
The ultimate UI kit for Figma
What is Untitled UI?
Untitled UI Figma is the largest UI kit and design system for Figma in the world. Here's everything great about Untitled UI in just 60 seconds.
Untitled UI in 60 seconds
The ultimate Figma UI kit | Untitled UI from Untitled UI on Vimeo
Playing in picture-in-picture
Pause
Speed
Picture-in-Picture
Show controls
2x
1.5x
1.25x
1x
0.75x
0.5x
\ Preview in Figma](/content/preview/figma/index.html)
Join 380,000+ designers from the world's top companies
Untitled UI is the best $ I've spent on my business in a long time. I'm going to keep using it and recommending it to every designer I know.
Sam Pierce Lolla
Founder, Shuffleboard
Over the years we've featured hundreds of UI kits on UXCrush, but Untitled UI is by far the most comprehensive and detailed I've seen yet. A must have for any designer!
Luca Vavassori
Founder, UXCrush
I've used all UI kits on the market. I can say without a doubt that the Untitled UI kit is the best on the market. It covers everything a designer needs in a modern and efficient way.
Murat Alpay
Product Designer, @imuratalpay
Incredible, and keeps getting better. I’ve tried dozens of UI kits and Untitled UI is the only name you should care about. It stands head and shoulders above the rest.
Jérémy Franck
Designer, @jrmyfranck
Such a beautiful, detailed, and extensive UI kit. Untitled UI is the perfect foundation for any project. I highly recommend this huge time saver.
Adham Dannaway
Product Designer, Practical UI
Untitled UI has been an amazing resource that I'm learning to rely upon to spin up ideas in no time. I think I might launch a startup pretty soon by mistake here!
Riccardo Buzzotta
Senior Product Designer, Spotify
The sheer scale, details, and organization of this kit is mind-blowing. It covers nearly everything a Designer could need in a modern, efficient and systematic way.
Corey Moen
Senior Brand Designer, Webflow
I'm super impressed with this. I love poking around in other peoples UI Kits to see how they think. This is probably one of the most comprehensive I've seen.
Matt Walker
Design Systems, Mailchimp
I'm super excited to use this for quick mockups of ideas in Figma. We're always trying to streamline our design process so we can move fast! Definitely recommend.
Jenny Chu
Head of Product, Eucalyptus
Untitled UI is easily the best UI kit I've used so far. It has an insane amount of components that are all incredibly well-built. I don't even know how many hours this will save.
Sunny Trochaniak
Founder, NewPulse Labs
The attention to detail and thought Jordan has put into this UI kit is unparalleled.
Dan Mcleay
Lead Designer, Fox Sports
Untitled UI is incredibly well-organized and the attention to detail is great. I highly recommend this kit to any designer that wants to create beautiful designs fast.
Tom Bekkers
Founder & Creative Director, Flowbase
What an awesome Figma kit... it's an absolute game changer. This is the perfect base for any design system. The size and attention to detail is next level.
Dan Anisse
Co-founder, Relume
We've been using Untitled to build Himalayas 2.0 and have finished a complete redesign in just a few days. It has everything we need already pixel-perfect.
Abi Tyas Tunggal
Co-founder, Himalayas
Join our affiliate program
A simple and easy way to make 30% of every sale you refer to Untitled UI. Earn up to $2,699.70 on each sale!
Untitled UI in 60 seconds