Miltinson.Design system
GitHub

Eyebrow

Uppercase mono section label — marketing typography.

atomsSource
import { Eyebrow } from '@elirobinson/react/components/atoms/Eyebrow';

Styles: @elirobinson/react/styles/atoms/Eyebrow.css — already included when you import @elirobinson/react/styles.css.

Case study
Show code
import { Eyebrow } from '@elirobinson/react/components/atoms/Eyebrow';

export default function Basic() {
  return <Eyebrow>Case study</Eyebrow>;
}

When to use it

Eyebrow is marketing typography — an uppercase, tracked mono label that introduces a section on a landing or content page ("Case Study", "Coaching Guides"). It's not a form label (use Label or the built-in label prop on a field) and it's not a status tag (use Badge).

Paired with a heading

Eyebrow carries no heading semantics — it's a visual lead-in, so keep the real <h1> through <h6> right after it.

Coaching guides

Practical playbooks for youth soccer coaches

Show code
import { Eyebrow } from '@elirobinson/react/components/atoms/Eyebrow';

export default function InContext() {
  return (
    <div className="demo-col">
      <Eyebrow>Coaching guides</Eyebrow>
      <h2>Practical playbooks for youth soccer coaches</h2>
    </div>
  );
}

Props

No props of its own beyond the inherited HTML attributes.

Also accepts all HTMLAttributes<HTMLSpanElement> props.

Accessibility

  • Renders a plain <span> — no heading role, no landmark, nothing implied beyond its visible text.
  • Screen readers and search engines read it as ordinary inline text; it doesn't substitute for document structure.

Do

  • Pair every Eyebrow with a real heading right after it — it’s a lead-in, not the heading itself.
  • Keep eyebrow text short — two to four words reads best in the tracked uppercase type.
  • Use it to introduce a section on a marketing or landing page.

Don't

  • Use Eyebrow as a heading substitute — it has no heading semantics for assistive tech or SEO.
  • Use Eyebrow inside product UI chrome where Label or a section heading already does the job.
  • Write full sentences in an Eyebrow — the uppercase tracking makes long text hard to read.