Design System / Application UI / Headings
Headings
Card headings, page headings, and section headings with actions, avatars, and metadata.
Layout · 17 variantsHow To Use This Page
Headings sits inside the Application UI part of the catalog and collects reusable examples that solve the same job in different ways.
This page currently groups 17 examples so you can compare structure, emphasis, and density before choosing an implementation direction.
How The Content Is Grouped
- The examples are grouped as a single Application UI reference page so you can compare variations without leaving the route.
- Use the jump links to move straight to the most relevant example once you know which structure, layout, or emphasis pattern you need.
Start With
Simple
A basic card header with a single title.
With action
Places a compact action in the card header.
With description
Adds supporting context below the card title.
With avatar and actions
Useful for owner cards and profile detail panels.
With description and action
Balances metadata and a primary save action.
With actions
Standard page header with primary and secondary actions.
With actions and breadcrumbs
Adds navigation breadcrumbs above the page title.
With avatar and actions
Includes an avatar for user or entity context.
Card Headings
Simple
A basic card header with a single title.
Project Details
With action
Places a compact action in the card header.
Project Details
With description
Adds supporting context below the card title.
Project Details
Manage your project settings
With avatar and actions
Useful for owner cards and profile detail panels.
Tom Chen
Admin
With description and action
Balances metadata and a primary save action.
Project Details
Manage your project settings and configuration
Page Headings
With actions
Standard page header with primary and secondary actions.
Projects
Home / Projects
Projects
With avatar and actions
Includes an avatar for user or entity context.
Taylor Foster
Senior Designer · Product Design
Acme Corp
Engineering · 48 members
With meta and actions
Adds metadata rows below the page title.
Engineering Team
Dark with actions
Dark background variant for high-contrast page headers.
Home / Projects
Projects
Section Headings
Simple
Minimal section label.
Team Members
With action
Adds a CTA to the right of the section heading.
Team Members
With description
Adds a descriptive line below the section title.
Team Members
A list of all team members and their roles.
With badge and dropdown
Adds status badge and overflow menu.
Team Members
NewWith tabs
Tabs embedded into the section heading.
Team Members
With inline tabs
Keeps the title and tabs on a single row.