🧩 Page headers

[JoshBeveridge]

⚙️ Summary

Visit the Figma file

This pattern should be used as the primary page header on all pages with the exception of the homepage. The page header is an amalgamation of a few other chrome-level components and includes the leading <h1> element containing the page's title. All pages should be supplemented with a concise subtitle sentence that describes the primary tasks available on the page.

💾 Files and resources

Background graphic

** Something to note about the header's background - it uses a solid black, unlike the Hydrogen-configured black value on the rest of the site.

✅ Design checklist

• Default pattern
• Dark mode pattern
• Patterns states (including empty/null where appropriate)
• Dark mode pattern states (if applicable)
• Mobile (base query) layout and space diagram
• Desktop (p-tablet query or larger) layout and space diagram
• Accessibility considerations
• Hover states (if applicable)
• Dark mode hover states (if applicable)
• Focus states (if applicable)
• Dark mode focus states (if applicable)

✅ Accessibility checklist

Please refer to the comprehensive list for more details.

• Tap targets are adequate on smaller screens
• Color contrast for all modes and states has been checked and cleared
• Zoom has been considered as layout changes occur
• alt text has been identified and labelled
• Non-standard states or interactions have been described and provided accessible design context

📸 Screenshot

🔃 Pattern variations

Standard pages

Standard pages will use a consistent layout that centers content on mobile and left aligns it on desktop. The graphic attached above should be fixed in the top right corner, and span a measured width behind the text.

Photo headers

Photo headers are only used in specific circumstances where the design has dictated. Pages with photo headers swap the graphic out in favor of a fixed photo that fades into the background. The positioning of this photo is rather complex, because it should start below the content on mobile, and then fix itself to the right side of the content's container on larger viewports. Copy elements in this variation should have a shorter width applied to them so that they don't overlap the photo when text is long.

The following pages currently require photo headers:

• Browse IT jobs
• Contact/FAQ

Centered layouts

To account for legacy page (manager search) layouts (and an upcoming dashboard layout), the page header has a variation where the breadcrumbs are omitted and content overlaps the divider, impeding into the header area. The title and subtitle are centered as well.

🥰 Accessibility

Nothing of huge note here, besides ensuring that text is legible and not overlapping photos in the photo variant.

⚙️ Subcomponents

• Canada banner (keep same, updated one coming soon)
• Navigation
• Breadcrumbs (keep same, updated one coming soon)
• Divider

📝 Related issues

Please link all design and development sub-tasks related to this issue here for tracking purposes.

• TBD

[mnigh]

@substrae do page headers still need further discussion or can this be closed?

[JoshBeveridge]

@mnigh

We were originally trialing these discussions as evergreen issues to track component requirements, but given that they haven't been used as such, it's probably safe to close them, yes.