/// Typography
Eyebrow
The slash-eyebrow section tell — a spaced uppercase mono label over a muted /// marker.
import { Eyebrow } from "@protocore/pds";Basics
Eyebrow renders its children as a spaced uppercase mono label prefixed by the /// marker — /// PERMISSIONLESS INFRASTRUCTURE.
Above a heading
The eyebrow's whole job is to sit above a section title. The canonical stack is eyebrow → heading → lead copy.
Where the protocol runs
Validators, relayers, and light clients each secure a distinct slice of the stack.
Marker
The default /// marker *is* the brand tell. Override marker only for a deliberate variation (a rule, a section number) — never to remove the signal for its own sake.
A signature tell
The slash-eyebrow is one of the three signature tells of the Protocore Design System — the small cues that make a screen unmistakably ours. It is the ///-prefixed, letter-spaced, uppercase mono kicker that introduces almost every section.
Think of it as the section's call sign: it names the region before the heading states it. The mono family and wide tracking read as *system chrome* rather than content, so it frames the heading without competing with it. Use it consistently — every major section gets one — and the repetition becomes a rhythm the reader learns to navigate by.
When to use it
Place an Eyebrow directly above a Heading or Display to label the section. It is the counterpart of the other two tells: BracketIndex enumerates items within a section, while SignalCount marks the one live number on the page.
Don't use it as a standalone caption or a status label — for status use Badge, and for metadata use Tag. The marker text is decorative and hidden from assistive tech, so the label itself must be a meaningful phrase.
Guidelines
Do
- Put one eyebrow directly above each major section's heading.
- Keep the label to a short two-to-four word phrase.
- Keep the default `///` marker unless a design deliberately varies it.
- Write the label in normal case — the component uppercases it for you.
Don't
- Don't use an eyebrow as a status indicator — reach for `Badge`.
- Don't stack multiple eyebrows on one heading.
- Don't pour a full sentence into the label.
- Don't rely on the `///` marker to carry meaning — it is `aria-hidden`.
Accessibility
- Renders a `div` — it is a label, not a heading, so it never enters the heading outline (the adjacent `Heading` owns that).
- The `///` marker is `aria-hidden`, so screen readers announce only the label text.
- Letter-spacing and uppercasing are visual; the underlying text stays normal-case for correct pronunciation.
Mobile (React Native)
Preview. @protocore/pds-mobile ships the React Native sibling of Eyebrow. It mirrors the web API where React Native allows; the package is a preview with no device-level QA yet, so pin it and expect small changes.
Import it from the mobile package (not @protocore/pds), inside a <PdsProvider> — there is no stylesheet, so style (a ViewStyle) replaces className and every value comes from the theme:
import { Eyebrow } from "@protocore/pds-mobile";Parity with web. The /// LABEL section tell — spaced uppercase mono over a muted marker.
- The
markerglyph is decorative and hidden from assistive tech; the label carries the accessible text.
<Eyebrow>Overview</Eyebrow>Eyebrow props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The label text — rendered uppercase, mono, letter-spaced. |
className | string | — | |
marker | string | /// | Prefix glyph before the label. Default `///` (the slash-eyebrow tell). |
style | CSSProperties | — |