Page Header

Page Header

Component File: src/components/shared/PageHeader.tsx Route: Used across all page components Access Level: All authenticated users Last Updated: December 16, 2025 Status: ✅ Implemented

Overview

The Page Header is a reusable component that provides consistent page titles and optional subtitles across the application. It ensures visual consistency and proper spacing for all page headers.

Props

interface PageHeaderProps {
  title: string;
  subtitle?: string;
}

Usage

<PageHeader 
  title="Donor Management" 
  subtitle="Manage your donor relationships"
/>

Styling

• Uses consistent typography from design system
• Proper spacing below header
• Responsive text sizing
• Supports dark mode

Implementation Status

| Feature | Status |

|---------|--------|

| Title display | ✅ Complete |

| Subtitle support | ✅ Complete |

| Responsive design | ✅ Complete |

| Dark mode support | ✅ Complete |

Related Documentation

• STYLING-GUIDE.md - Typography standards

Synced from IFMmvp-Frontend documentation: pages/components/18-PAGE-HEADER.md