<!-- Protocore Design System — Eyebrow -->
# Eyebrow

- **Category:** Typography (`typography`)
- **Slug:** `typography/eyebrow`
- **Status:** stable
- **Platforms:** web, mobile
- **Import:** `import { Eyebrow } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/typography/eyebrow

> The slash-eyebrow section tell — a spaced uppercase mono label over a muted /// marker.

## 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.

## 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:

```tsx
import { Eyebrow } from "@protocore/pds-mobile";
```

**Parity with web.** The `/// LABEL` section tell — spaced uppercase mono over a muted marker.

- The `marker` glyph is decorative and hidden from assistive tech; the label carries the accessible text.

```tsx
<Eyebrow>Overview</Eyebrow>
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `children` | `ReactNode` | no | — | The label text — rendered uppercase, mono, letter-spaced. |
| `className` | `string` | no | — | — |
| `marker` | `string` | no | `///` | Prefix glyph before the label. Default `///` (the slash-eyebrow tell). |
| `style` | `CSSProperties` | no | — | — |

## Examples

### Basics

`Eyebrow` renders its children as a spaced uppercase mono label prefixed by the `///` marker — `/// PERMISSIONLESS INFRASTRUCTURE`.

```tsx
import { Eyebrow } from "@protocore/pds";

export default function EyebrowBasics() {
  return <Eyebrow>Permissionless Infrastructure</Eyebrow>;
}
```

### Above a heading

The eyebrow's whole job is to sit above a section title. The canonical stack is eyebrow → heading → lead copy.

```tsx
import { Eyebrow, Heading, Text } from "@protocore/pds";

export default function EyebrowSection() {
  // The canonical stack: slash-eyebrow, then heading, then lead copy.
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <Eyebrow>Our Domains</Eyebrow>
      <Heading>Where the protocol runs</Heading>
      <Text color="secondary" style={{ maxWidth: 420 }}>
        Validators, relayers, and light clients each secure a distinct slice of the stack.
      </Text>
    </div>
  );
}
```

## 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

**Notes**

- 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.

## Related

`heading`, `display`, `bracket-index`, `signal-count`

---

© Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/