Page Header
The header of a page: a title, an optional subtitle and the page actions on the right, which wrap under the title when the space runs out.
A block from @tectra-ng/blocks — it comes with tectra-ng, or alone: npm install @tectra-ng/blocks.
Basic
A title, a muted subtitle and the main action of the page. The subtitle uses tabular digits, so a count does not shift as it changes.
Payments
24 payments this month
Actions
Put any number of actions inside; they wrap under the title on a narrow screen. A solid secondary button gets the card background and border, so a "Back" button stays visible on the page background.
Invoice INV-1042
Issued 12 March · due in 14 days
Last action: none
Tabs
The actions area takes any content — here pills that switch the view of the page.
Tasks
Everything assigned to your team
View: list
Title only
Without a subtitle or actions only the title is drawn; the empty actions area takes no space.
Profile
Heading level
The title is an <h1> by default. Use headingLevel when the header heads a section of a page that already has its main heading.
API keys
3 active keys
Design tokens
dt changes the tokens of one header: here a larger title and more space between the parts.
Reports
Weekly numbers of every project