registry:blockpro-application

Headers

A collection of flexible page header patterns that anchor page context and key actions. Includes minimal headers with actions and search, headers with optional cover imagery, tab-based navigation for section switching, and combined layouts with both cover images and tabs. Designed to scale from simple utility pages to richer, content-led views while keeping titles, navigation, and primary actions clear and consistent.

Header 1 - Page header with actions and search

A standard page header that anchors the page title with optional breadcrumbs, primary actions, and inline search. Designed for app and dashboard pages where users need context, quick actions, and filtering in one place. Collapses cleanly on smaller screens into a stacked layout with back navigation and core controls.

Header 2 - Page header with cover image

A page header that pairs a visual cover with navigation context and search. Uses an image to set tone or brand while keeping the page title, breadcrumbs, and controls clear and accessible. Works well for profile, settings, or content overview pages where light visual hierarchy helps without overpowering the UI.

Header 3 - Page header with tabs

A compact page header that combines breadcrumbs, a clear page title, and inline tabs for switching between related sections. Keeps navigation close to the content and works well for settings, account areas, or multi-section pages where users move between views often.

Header 4 - Page header with cover image and tabs

A richer page header that pairs breadcrumbs and a page title with a visual cover image and inline tabs. Useful for profile, settings, or sectioned pages where you want stronger visual hierarchy while still keeping navigation and actions close to the content. Works well for top-level views that benefit from branding or context imagery.

Header 5 - Profile header with identity and actions

A compact header designed for user or account pages. Combines avatar, name, and secondary details with inline actions and search, keeping identity and controls visible without dominating the page. Works well for settings, profile, or account management views where context matters more than decoration.

Header 6 - Page header with supporting description

A lightweight page header that pairs a clear title with a short supporting description. Designed for settings or configuration screens where users need immediate context about what they are editing, with optional inline actions and search kept secondary to the page intent.