Page header

A page title block with actions slot.

Dashboard

An overview of your account activity and recent metrics.

import { BuiPageHeader } from 'ng-blatui';

<bui-page-header heading="Dashboard" description="An overview of your account." />

With actions

Projects

Manage and organize all of your team's work in one place.

<bui-page-header heading="Projects" description="Manage your team's work.">
  <div buiPageHeaderActions class="flex gap-2">
    <button buiButton variant="outline">Export</button>
    <button buiButton>New project</button>
  </div>
</bui-page-header>

With separator

Billing settings

Update your plan and payment method.

<bui-page-header heading="Billing" description="…" [separator]="true" />

API reference

Inputs

Prop	Type	Default	Description
`heading`	`string`	`''`	Title text rendered in the heading (alternative to projecting content).
`description`	`string`	`''`	Optional supporting text shown beneath the heading.
`separator`	`boolean`	`false`	Whether to render a bottom border separating the header from the page.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.