Background
Hero and banner images have a non-trivial implementation pattern. They use two images — a foreground and a background — that must layer correctly and scale across all screen sizes. Before this pattern is built out across the project, we need a clear understanding of how it works and where the complexity lies.
Goal
Investigate the foreground/background hero image pattern and produce documentation that allows any developer on the team to implement hero images confidently and consistently.
Tasks
- Meet with Rob to learn more about the hero image pattern and any additional nuances with the foreground/background images
- Review the current hero/banner image markup and assets
- Understand how the foreground and background images are structured and layered together
- Identify how both images scale and respond correctly across breakpoints
- Note any gotchas, edge cases, or constraints (e.g. aspect ratios, z-index, object-fit, positioning)
- Produce implementation notes/instructions as the deliverable
Deliverable
A short technical document (Notion) covering:
- How the two-image layering pattern works (foreground + background)
- How to implement it correctly
- How responsive scaling should be handled for both images
- Any known pitfalls to avoid
Out of Scope
- Actually building or updating any hero components
- Design decisions around image content or layout
Background
Hero and banner images have a non-trivial implementation pattern. They use two images — a foreground and a background — that must layer correctly and scale across all screen sizes. Before this pattern is built out across the project, we need a clear understanding of how it works and where the complexity lies.
Goal
Investigate the foreground/background hero image pattern and produce documentation that allows any developer on the team to implement hero images confidently and consistently.
Tasks
Deliverable
A short technical document (Notion) covering:
Out of Scope