Page Header

Contextual page headers with breadcrumb navigation, title or profile identity, action buttons, and optional cover images. Five layout variants respond cleanly to mobile widths.

Default

Breadcrumb, bold title, and description on the left. Action buttons and search on the right.

Team members

Manage your team members and their account permissions here.

⌘K

With profile

Replaces the title block with a user avatar, name, and email. Use for settings pages scoped to a specific user.

Olivia Rhye
Olivia Rhyeolivia@dennisisaac.com
⌘K

With cover

A decorative gradient banner sits above the header content. The title and actions layout is unchanged.

Team members

Manage your team members and their account permissions here.

⌘K

Cover with profile (left)

The user avatar overlaps the cover's lower edge, anchored to the left. A verified badge can be added with isVerified.

Olivia Rhye
Olivia Rhyeolivia@dennisisaac.com
⌘K

Cover with profile (center)

The avatar, name, and actions are all centered — ideal for public profile or account overview pages.

Olivia Rhye
Olivia Rhyeolivia@dennisisaac.com
⌘K

Site navigation

A full website navigation bar with dropdown menus, icon actions, a primary CTA, and optional theme controls.