Skip to content
Site volume
Colourway

Components

Eyebrow

A label-role line over a heading, sentence case, with a line badge or a short bar.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/eyebrow
On this page

Example#

Look of this example

After launch

Live render of examples/eyebrow/basic.tsx

Usage#

Use an eyebrow for the short line of context above a heading: the section, the line of work, a date. It is a paragraph in the label role, never a heading itself.

  • Markers. line prefixes a 16 px LineBadge (line="maxos" gives the wood badge); marker="bar" prefixes a short ink bar.
  • Sentence case, always. No uppercase micro-labels (D-D4): the label role is 14 px and weight 600, legible on its own.

Anatomy#

After launch

The parts of examples/eyebrow/basic.tsx, numbered:
  1. MarkerA line badge, or a short bar..mk-line-badge
  2. Textdata-mk-part="text"

Volume#

Reading layer: identical at every volume.

  • Quiet

    After launch

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    After launch

    The site default. Art on its own plates, one display moment per view.

  • Press

    After launch

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    After launch

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • Two to four words: "After launch", "Case study".
  • Context, not a second title: the heading under it carries the claim.

Do and don't#

Do

After launch

Sentence case in the label role.

Don't

AFTER LAUNCH

Tracked capitals at 14 px.

Small capitals tracked wide are hard to read and shout at the wrong size (D-D4). The label role is already distinct by weight.

Accessibility#

  • It is a paragraph, never a heading, and never an uppercase micro-label (D-D4).
  • The line badge beside it is decorative; the words carry the meaning.

Props#

PropTypeDefaultDescription
line"custom-apps" | "growth" | "maxos" | "software" | "websites"noneThe line this eyebrow speaks for: prints its badge.
marker"bar" | "none"none`bar` prints a short rule before the words (ignored with `line`).
renderRenderPropnone
children requiredReactNodenone

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from EyebrowProps in packages/overprint-react/src/reading/eyebrow/eyebrow.tsx.

Tokens#

System tokens (5)

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry
  • Patchreact, threeReact: the label role (14 px, now 600) prints in --mk-text in Eyebrow, the Card and PageHero eyebrows, SpecStrip labels, the stacked table's cell headers, the Navbar panel's meta and the NavSheet group titles, because no secondary ink reaches the label's floor; placeholders, input start and end text and the select's empty choice print in the new --mk-on-control-2; Art interactive marks no layer, so the 3D stage's own art and plate layers decide (its caption and keys never sit inside an art layer). Read the whole entry