Figma Header

Preview

Figma Page Header

Figma Site Header

Page headers are the top sections of a website that reinforce brand identity through a bigger company logo, illustration, site name, or extra navigation links.

Page Header Anatomy

Set	Variants	Properties
PageHeader	21	Layout 01, 02, 03, 04, 05, 06, 07Size Desktop, Tablet, Mobile

PageHeader is one set of 21 variants — seven layouts, 01 to 07, each in Desktop, Tablet and Mobile sizes — the top band of a website carrying a larger logo, contact details, promo banner or extra navigation links above the main nav.

Page Header AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build seven page header blocks in Figma, each in Desktop, Tablet and Mobile widths. 01: a slim utility bar above the navigation with phone number, email and language select on the left and social icons on the right. 02: a promo banner with a short message, a Shop now link and a close icon on an accent background. 03: a tall brand header with a large centred logo, a tagline and the navigation links beneath. 04: a header with the logo on the left, a search input in the centre and account and cart icons on the right, for storefronts. 05: a two-row header — utility bar plus main navigation with a primary button. 06: a header with a background illustration and the logo and links over it. 07: a minimal header with the logo and a single Contact button. Collapse utility rows into a single line on tablet and hide or stack them on mobile, keep the navigation links, inputs and buttons as nested kit instances, and bind background colours to variables.

You can include important details such as contact information and a call-to-action banner, allowing visitors to see what your website is currently promoting.