Eyebrow

How

A short label in the display face with added letterspacing, set above a heading.

When

Once per block, to name what the block is for, so the heading can be a claim instead of a label.

Where

Directly before the heading it belongs to. Never on its own, and never twice in one block.

In code

src/components/ui/Eyebrow.astro. CaseBlock and CaseHero already render it from their sdc-eyebrow prop, so call it directly only outside those.

---
import Eyebrow from '../../components/ui/Eyebrow.astro';
---
<Eyebrow>The stage</Eyebrow>
<h2 class="sdc-cs-h2 sdc-display">PayPal partners with the top 100 merchants.</h2>

Prop	Type	Default	What it does
class	string	none	Extra classes, for the rare caller that needs to position it.

It is not a heading

It renders a p, so it stays out of the heading outline. Someone navigating by headings gets the claims, which is the useful list. If the eyebrow were an h3 they would get “What was unclear”, “What I led”, “Who I directed” on every page, which tells them nothing about the page they are on.

Content

Two to four words, no terminal punctuation. It names the kind of thing the block says: “What was unclear”, “What I led”, “What changed”. The same few labels repeat across case studies on purpose, so the shape of each page is recognisable.

Do

• Keep it to two to four words.
• Reuse the established labels across case studies.
• Follow it immediately with the heading.

Don’t

• Mark it up as a heading.
• Use two in one block.
• End it with a period or a colon.

Checks before you ship

1. The heading outline contains claims, not eyebrow labels.
2. Each block has at most one.
3. It is two to four words with no terminal punctuation.
4. A heading follows it immediately.