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" />