Header Components

A page header sets context in the first second: what this page is, who it's for, and what to do next. Unlike a homepage hero it should be compact, with a clear H1, one supporting line, and at most one action, so the real content starts above the fold.

Copy any of the header wireframes above into Figma, Framer, or Webflow to give about pages, feature pages, and landing pages a consistent opening. Alignment, max-widths, and breadcrumb placement follow patterns readers already know how to scan.

Pick one header pattern and reuse it across every interior page. Consistent headers make a site feel designed as a system, and they let returning visitors skip straight to the content because the opening block never surprises them.