Page Header
The page header component provides a consistent introduction section for pages with titles, lead text, metadata, and optional interactive elements. Use page headers to establish page context, communicate key information, and guide users toward primary actions. The component supports various configurations including search functionality, call-to-action buttons, and metadata display for different content types.
Do
- Use clear, descriptive page titles that accurately communicate the page purpose and content to users.
- Include lead text for context when the page title needs additional explanation or supporting information.
- Maintain consistent header hierarchy across your site to establish predictable navigation patterns.
- Use appropriate heading tags (h1 for main pages) to support proper document structure and accessibility.
- Include relevant metadata (publish dates, content types, authors) for news articles, press releases, and time-sensitive content.
- Test responsive behavior to ensure headers remain readable and functional across all screen sizes.
- Use container classes consistently to maintain proper content width and alignment with your site layout.
- Include search functionality on pages where users need to find specific information within large content sets.
Don't
- Don't use generic page titles — avoid vague titles like "Information" or "Details" without specific context.
- Don't overcrowd headers with too many elements — prioritize essential information and actions.
- Don't ignore mobile experience — ensure header content remains accessible and readable on smaller screens.
- Don't use inconsistent spacing — maintain standard margins and padding to create visual rhythm.
- Don't forget breadcrumb integration — consider how headers work with navigation elements above them.
- Don't use multiple h1 elements — maintain proper heading hierarchy for accessibility and SEO.
- Don't make lead text too long — keep summary content concise and scannable for users.
- Don't use headers without clear purpose — every header should serve a specific communication goal.
Text Header
Basic page header with title and lead text. Demonstrates the standard pattern for most content pages with clear messaging and proper semantic structure. Use this pattern for general content pages, service descriptions, and informational content.
Apply for Your Benefits Online
Easily submit your application for government benefits through our secure online system. Quick, convenient, and available 24/7.
Search Header
Search-enabled page header with integrated search functionality. Shows how to embed a search field directly in the header for immediate user access to content discovery. Use for directory pages, resource libraries, or content-heavy sections where search is a primary user need.
Find the Information You Need
Search government services, programs, news, and resources across the Northwest Territories.
Accessibility Best Practices
Screen Reader Support
- Semantic header structure: Uses proper
<header>element with appropriate heading hierarchy for document structure. - Descriptive page titles: Clear, specific titles that communicate page purpose without requiring additional context.
- Proper heading tags: Uses h1 for main page titles and maintains logical heading progression.
- Metadata labeling: Publication dates, authors, and content types are properly labeled for screen reader context.
Keyboard Navigation
- Focusable interactive elements: All buttons, links, and form controls within headers are keyboard accessible.
- Logical tab order: Interactive elements follow natural reading order and visual layout.
- Skip navigation compatibility: Headers work properly with skip-to-content functionality.
- Search form accessibility: Header search forms include proper labels and keyboard shortcuts when present.
Visual Accessibility
- High contrast ratios: All header text and interactive elements meet WCAG AA contrast requirements.
- Clear visual hierarchy: Title, lead text, and metadata use appropriate sizing and spacing for scanability.
- Focus indicators: Clear visual focus states for all interactive elements within headers.
- Responsive typography: Header text scales appropriately across all device sizes and zoom levels.
Content Guidelines
- Action-oriented titles: Use compelling, descriptive titles that clearly communicate page purpose.
- Supportive lead text: Include brief explanatory text that provides context without overwhelming the design.
- Consistent metadata formatting: Use standard formats for dates, author names, and content classifications.
- Clear call-to-action text: Button and link text should be specific and describe the expected outcome.
Implementation Considerations
- Container management: Use
has_containeroption to control whether headers include Bootstrap container classes. - Spacing control: Leverage margin utility classes to adjust header spacing based on surrounding content.
- Breadcrumb integration: Consider
hide_breadcrumbsoption when headers need to work with navigation elements. - Content management: Ensure header content can be easily updated through your CMS or content workflow.
ARIA Attributes in Use
role="banner"— Applied automatically to header landmark when appropriate.aria-label— Provides additional context for search forms and interactive elements when needed.aria-describedby— Connects header elements when additional context is required.aria-labelledby— Links related header content for screen reader navigation.