Page Header

Reusable page header with title, subtitle, back button, and action area

Overview

PageHeader provides consistent page-level titles with optional subtitle, back button, actions, and badges. It's the primary way to establish page identity and provide navigation context.

Key Features

Title and optional subtitle for page identification
Back button with customizable label and href
Action area for buttons (filter, export, create)
Badge slot for status indicators (Active, Preview, etc.)
Gradient separator option for visual emphasis

Examples

Basic Header (Title Only)

The simplest form with just a title.

Dashboard

With Subtitle

Add context with a descriptive subtitle.

Projects

Manage your testing programs and validation efforts

With Back Button

Navigation breadcrumb for nested pages.

Project Details

Mobile App Redesign

With Actions

Action buttons on the right side for page-level operations.

Tasks

Track and manage project tasks

With Badge

Status badge next to the title for quick identification.

Beta Features

Preview

Preview upcoming functionality

Full Example (All Features)

Combining all features: back button, badge, and actions.

Project Settings

Active

Configure project preferences and team access

Content Guidelines

How to write effective titles and subtitles.

The Core Formula

Title

WHERE you are→Entity + Mode/Context

Subtitle

WHAT you can do here→Action-oriented description

Subtitle must add information, never restate the title.

Title Patterns

Page Type	Pattern
Scope home (user)	Welcome to your {Mode}, {Name}
Scope home (entity)	{Entity Name}
List page	Plural noun
Detail page	Entity name (+ back button)
Settings page	{Scope} Settings
Create page	New {Noun}
Edit page	Edit {Noun}

Subtitle Best Practices

Describe what you can DO, not what it IS
Use present tense, active voice
Keep to 5-10 words
Omit trailing period

Avoid These Patterns

Restating the title
Generic phrases like "View and manage your..."
Describing the obvious

Good vs Bad Examples

Context	Good	Bad
Hub	Everything you're working on, in one place	Your hub page
Timeline	Recent activity across your programs	View your timeline
Members	Manage who has access	View and manage members

Props Reference

Prop	Type	Default	Description
`title`	`string`	`required`	Main heading text for the page
`subtitle`	`string`	`-`	Optional descriptive text below the title
`back`	`{ href: string; label?: string }`	`-`	Back navigation with href and optional label
`badge`	`ReactNode`	`-`	React node to display as a status badge
`actions`	`ReactNode`	`-`	React node for action buttons on the right
`separator`	`'line' \| 'gradient' \| 'none'`	`'line'`	Separator style: 'line', 'gradient', or 'none'

Usage

import { PageHeader, PageCard } from '@/ui/components';
import { Button, Badge } from '@/ui/primitives';

<PageHeader
  title="Dashboard"
  subtitle="Welcome to your workspace"
  back={{ href: '/hub', label: 'Back to Home' }}
  badge={<Badge variant="success">Active</Badge>}
  separator="gradient"
  actions={
    <Button variant="default">
      <Icon icon={faPlus} />
      New Project
    </Button>
  }
/>

{/* Content follows with mt-6 spacing */}
<PageCard className="mt-6">
  {/* Page content here */}
</PageCard>

Page Type

Pattern

Scope home (user)

Welcome to your {Mode}, {Name}

Scope home (entity)

{Entity Name}

List page

Plural noun

Detail page

Entity name (+ back button)

Settings page

{Scope} Settings

Create page

New {Noun}

Edit page

Edit {Noun}

Context

Good

Bad

Hub

Everything you're working on, in one place

Your hub page

Timeline

Recent activity across your programs

View your timeline

Members

Manage who has access

View and manage members

Prop

Type

Default

Description

title

string

required

Main heading text for the page

subtitle

string

-

Optional descriptive text below the title

back

{ href: string; label?: string }

-

Back navigation with href and optional label

badge

ReactNode

-

React node to display as a status badge

actions

ReactNode

-

React node for action buttons on the right

separator

'line' | 'gradient' | 'none'

'line'

Separator style: 'line', 'gradient', or 'none'

import { PageHeader, PageCard } from '@/ui/components'; import { Button, Badge } from '@/ui/primitives'; <PageHeader title="Dashboard" subtitle="Welcome to your workspace" back={{ href: '/hub', label: 'Back to Home' }} badge={<Badge variant="success">Active</Badge>} separator="gradient" actions={ <Button variant="default"> <Icon icon={faPlus} /> New Project </Button> } /> {/* Content follows with mt-6 spacing */} <PageCard className="mt-6"> {/* Page content here */} </PageCard>