Back to anti-patterns
orphan-hero-strip
Orphan Hero Strip
An otherwise immersive hero stops just short of the viewport edge and exposes a thin, empty strip of the page background.
Anti-patternsRecommended
Intent
Make first-viewport coverage and the transition into the next section feel deliberately composed across viewport sizes.
Checks
- Choose full-viewport coverage, an intentional next-band reveal, or a content-led hero boundary.
- Inspect the hero bottom edge at representative desktop, mobile, and short-height viewports.
- Make a next-section reveal contain recognizable content or contrast rather than empty page canvas.
Warnings
- Arbitrary viewport-height values often create accidental strips when header height, browser chrome, or content changes.
Exceptions
- A deliberate framed-page composition may expose the outer canvas when the frame is consistent on every edge.