Components
Eyebrow
An eyebrow is a short label in small, often uppercase or monospace type directly above a headline, naming the topic before the headline makes its claim.
- Also called
- Kicker, Overline, Section label, Pre-heading, Tagline label
- Spotted on
- 48 of 422 homepages
- Browse examples
- Hero sections →
What is an eyebrow?
Eyebrows split the work of a heading in two. The small line says what this is ("WISPR FLOW DICTATION", "One Platform", "FULLY MANAGED"); the big line below says why it matters. That lets the headline be a claim instead of a category name, and it gives scanners a table of contents down the page.
In our reviews they usually come in the brand's accent color or in monospace capitals. Decodable gives each of three cards a differently colored eyebrow; Eigenpal's slash-prefixed label above every section becomes the site's signature; Clerk confines its violet and cyan accents to eyebrow labels alone.
The weak eyebrow repeats the headline ("Features" above "Our features") or is so faint it reads as decoration. If the label carries no information the headline doesn't, drop it.
Eyebrow examples from real SaaS sites
Each one is a hero capture whose design review mentions the eyebrow.
When to use an eyebrow, and when not to
Use it for
- Claim-style headlinesThe headline is a benefit ("Ship faster") and readers still need to know which product or feature it is about.
- Long pagesMany sections in a row benefit from consistent labels that work like chapter titles.
- Restrained accent colorThe brand color needs a home that isn't a button; a small label is a safe one.
Avoid it for
- Self-explanatory headings"Pricing" above a pricing table needs no eyebrow saying "PRICING".
- Crowded heroesHero already has an announcement pill, a badge and a rating row; a fourth line above the headline is noise.
- Every blockWhen every card and subsection has its own eyebrow, they stop guiding the eye and become texture.
Anatomy of an eyebrow
- 1Label textTwo to five words, usually uppercase with added letter-spacing, or set in a monospace face.
- 2AccentAn accent color, a leading dot, slash, bracket or line that ties the label to the brand.
- 3SpacingSits tight above the headline (often 8-16px) so the two read as one unit.
- 4HeadlineThe claim the eyebrow introduces, much larger and usually in a different face or weight.
Common eyebrow variants
1. Uppercase sans label
Small tracked capitals in an accent color, the most common form.
2. Monospace eyebrow
Code-style capitals, common on developer tools; Factory sets eyebrow labels in monospaced capitals.
3. Bracketed or prefixed
Labels wrapped in brackets or led by a slash or number, as on Unsiloed and Eigenpal.
4. Pill eyebrow
The label inside a pill above the hero headline, often linking to news. Overlaps with an announcement pill.
Spotted in our design reviews
Our reviews describe an eyebrow on 48 of the 422 SaaS homepages in the catalog. A few of them:
The hero centres an eyebrow "ONE INTEGRATION.
Treblle · Above the fold
On the left, a mono eyebrow reads "THE OPENROUTER FOR AGENTS" above "One API," in black and "any agent." in blue.
Agentsky · Above the fold
A centred black hero carries a red bracketed kicker, "AgentRel: Agent Relations for B2B Software", above a three-line headline, "Tomorrow's Users Aren't Developers.
Manicule · Above the fold
The eyebrow "RIGHT PATIENT.
Tennr · Above the fold
The left column carries the eyebrow "Email warmup tool to avoid the spam folder", the headline "Don't land in spam anymore." and the buttons "Start Email Warmup" and "Talk to an Email Expert".
Mailwarm · Above the fold
The centred eyebrow "WISPR FLOW DICTATION" leads to the two-line serif headline "Don’t type, just speak.", then a second lilac button.
Wisprflow · Above the fold
On the left, the eyebrow "AI-POWERED VIDEO SELLING PLATFORM" sits above the headline "Video for every customer moment", then a filled indigo "Get a Demo" button beside an outlined "Sign Up for Free" button and a 4.5/5 G2 rating.
Vidyard · Above the fold
Above the fold, a green eyebrow reads "For product teams and their agents." over a centered headline, "Turn scattered feedback into signals your team can build from".
Usepropane · Above the fold
Often confused with
Eyebrow vs. announcement bar
An announcement bar sits above the navigation and carries time-sensitive news site-wide; an eyebrow belongs to one headline and frames it.
Eyebrow vs. badge
A badge flags status (new, beta) on an item; an eyebrow names the topic of the headline below it.
Frequently asked
Why is it called an eyebrow?
Because it sits just above the headline the way an eyebrow sits above an eye. Print editors call the same thing a kicker or overline.
Does an eyebrow need to be uppercase?
No, but it needs to look clearly different from the headline. Uppercase with tracking, monospace, an accent color or a smaller size each do that; most sites combine two.