Eyebrow

The letterspaced caps that open a section, with the manual’s 2px rule under them. Rule-less, it is the kicker of a card.

import { Eyebrow } from '@zitdevs/ui';

Examples

How we work

Build

In this guide

Audit

Start here

<Eyebrow text="How we work" />
<Eyebrow text="Build" tone="ink" rule={false} marker="primary" />
<Eyebrow text="Audit" tone="inverse" />

Props

Prop	Type	Default	Notes
text	string	required
tone	'light' | 'inverse' | 'primary' | 'ink' | 'muted'	'light'	The field: light, the inverse band, the primary band. ink and muted for card kickers.
size	'md' | 'sm'	'md'	12px / 11px.
rule	boolean	true	The 2px rule under the text.
marker	MarkerColor except neutral and current	—	Leads the text with a Marker.
id	string	—	So what it heads can name itself with aria-labelledby.
className	string	—	Placement, such as a bottom margin.
anything else	<p> attributes	—

The website’s tones map as navy → inverse and blue → primary. Exported type: EyebrowTone.

Accessibility

• A paragraph, not a heading: the title it opens is the heading, so the outline stays clean.
• It reads as its text alone; the marker is hidden.
• The caps are a style (text-transform), so screen readers read the words as written.

Without JavaScript

Plain markup, nothing to run.

Theming

tone	Text	Rule
light	text-primary	border-accent
inverse	text-primary-inverse	border-accent
primary	text-on-primary	border-on-primary
ink	text-ink	border-primary
muted	text-muted	border-strong

Use instead: eyebrow, title and lead together → SectionHead.