Mini Header

Mini Header

Mini Header is a compact header component designed for modals, embedded views, and secondary pages with simplified navigation.

Visual Specifications

Property	Value
Height	48-56px
Padding	16-20px horizontal
Background	White or light grey
Border	1px bottom border
Font Size	16-18px (title)
Font Weight	600 (title)

States

Default Back Only Close Only With Actions

Title centered or left-aligned with back button

Left-aligned title with back arrow

Title with X close button

Title with action buttons on right

Layout Variants

Variant	Alignment
Center Aligned	Title centered, edges for buttons
Left Aligned	Title left, actions on right
Balanced	Back left, title center, actions right

Button Configurations

Left	Center	Right	Usage
Back	Title	Close	Modal with navigation
-	Title	Close	Simple modal
Back	Title	-	Sub-page navigation
-	Title	Actions	Confirmation dialogs

Border Styles

Style	Usage
Full Border	Separates header from content
No Border	Seamless integration
Shadow	Elevation for floating headers

Usage Guidance

When to use

• Modal dialogs
• Embedded content views
• Secondary pages
• Slide-over panels
• Confirmation dialogs

Best practices

✅ Do	❌ Don’t
Keep titles concise	Long header text
Clear close/back action	Hidden exit method
Consistent height	Varying sizes
Context-aware title	Generic titles
Proper spacing	Cramped layout

Title Guidelines

Context	Title Format
Modal	Action or item name
Sub-page	Current page name
Form	Step or section name
Confirmation	Question prompt

Icon Specifications

Element	Size	Color
Back Arrow	20-24px	Brand or dark grey
Close X	20-24px	Dark grey
Action Icons	18-20px	Context-dependent