PageHeader

The PageHeader component provides a consistent header section for content pages with a title and optional description.

Overview

• Type: Layout Component
• Category: Page Structure
• Complexity: Simple
• File: src/components/PageHeader.astro

Features

• Consistent Styling - Uniform appearance across all pages
• Optional Description - Subtitle or introductory text
• Optional Background - Can include background image or color
• Responsive Typography - Scales appropriately on mobile/desktop

Props

interface Props {
  title: string;
  description?: string;
  backgroundImage?: ImageMetadata;
}

Prop Details

Prop	Type	Default	Description
title	string	Required	Main page heading (H1)
description	string	undefined	Optional subtitle or description
backgroundImage	ImageMetadata	undefined	Optional background image

Usage

Title Only

---
import PageHeader from '@/components/PageHeader.astro';
---

<PageHeader title="About Us" />

With Description

---
import PageHeader from '@/components/PageHeader.astro';
---

<PageHeader
  title="Contact Us"
  description="Get in touch with FiNAN representatives across the Nordic region"
/>

With Background

---
import PageHeader from '@/components/PageHeader.astro';
import bgImage from '@/assets/images/about-bg.webp';
---

<PageHeader
  title="Our Mission"
  description="Supporting Filipino nurses in the Nordic countries"
  backgroundImage={bgImage}
/>

Styling

Typography

• Title: 3xl on mobile, 4xl on desktop
• Description: Large text, gray color
• Font Weight: Bold for title, normal for description

Layout

• Centered text alignment
• Maximum width container
• Padding for comfortable spacing
• Responsive margin bottom

Background Handling

When backgroundImage is provided:

• Full-width image with overlay
• Text appears in white
• Darker overlay for readability

Common Use Cases

1. Standard Pages

   <PageHeader
     title="Membership"
     description="Join FiNAN and connect with Filipino nurses across the Nordics"
   />

2. Simple Headers

   <PageHeader title="FAQ" />

3. Visual Headers

   <PageHeader
     title="Our Impact"
     description="Making a difference in Nordic healthcare"
     backgroundImage={impactImage}
   />

Accessibility

• Heading Hierarchy: Uses proper <h1> tag for title
• Semantic Structure: Description in <p> tag
• Alt Text: Background images should have meaningful alt attributes
• Color Contrast: Ensures text is readable against backgrounds

Best Practices

• Keep title concise (3-7 words)
• Use description for SEO-relevant context
• Match title to page’s <title> meta tag
• Avoid duplicate H1 elements on the same page

Caution

Only use one PageHeader or HeroHeader per page to maintain proper heading hierarchy.

Variants

While PageHeader is simple, consider these alternatives:

• HeroHeader - For homepage with larger imagery and CTAs
• EventHeaderSection - For event pages with date/location
• Plain <h1> - For pages that don’t need a full header section

Dependencies

• astro:assets (if using background images)

Used On

• About Us
• Membership
• Contact
• FAQ
• Privacy Policy
• Most static content pages

Related Components

• HeroHeader - Homepage hero section
• EventHeaderSection - Event-specific header

Source Code

View the complete implementation:

https://github.com/poncardasm/finan-website/blob/main/src/components/PageHeader.astro