Eyebrow
The small uppercase kicker that sits above a heading.
Live demo
Eyebrow is the overline a section wears above its title: short, uppercase, tracked-out, and accent-toned by default. It is one element with no layout of its own: drop it as the first child of a Stack and the gap does the spacing.
tone swaps the accent ink for a quieter muted or subtle, or for any tone in the full roster (every semantic role, accent variant, or named hue) so a kicker can carry a status color, in that tone's on-surface ink derived to stay legible against the page. tracking widens the letter-spacing for a more deliberate label. Choose the as element to match the surrounding flow: a p for a standalone kicker, a span for one inline with other text.
When to use
How this component composes with the rest of the set.
Section or a Card header with an Eyebrow, then a Heading, then Text: a three-step hierarchy with no bespoke CSS. Stack, the Eyebrow needs no margin; the stack's gap sets the rhythm. tone="muted" where an accent kicker would compete with nearby accent color. Props
3 props, straight from the manifest.
| Prop | Type | Default | Bindings | Description |
|---|---|---|---|---|
p/div kicker or an inline span. | ||||
muted / subtle, or any tone in the full roster (semantic role, accent variant, or named hue) for a status-colored kicker in that tone's on-surface ink. | ||||
normal (0.08em) or wide (0.12em) for a more deliberate label. |
Anatomy
The named parts that make up the component. A ::part() handle is reachable from your own stylesheet; the class beside it is the component's internal selector, which a shadow boundary keeps to itself.
eyebrow
The kicker root carrying the tone and tracking classes.
Tokens & coverage
What the component consumes, checked live against what the algorithm produces.
Live coverage check against the xtyle-default register
(derive(xtyleDefault, { anchors }) →
coverComponent(manifest, register)). Every token this component
consumes must be a key the algorithm produces.
--accent-2-vivid--accent-3-vivid--accent-4-vivid--accent-vivid--black-vivid--blue-vivid--brown-vivid--cyan-vivid--danger-vivid--fg-2--fg-3--font-sans--gray-vivid--green-vivid--info-vivid--leading-tight--neutral-vivid--orange-vivid--pink-vivid--purple-vivid--red-vivid--success-vivid--text-xs--warn-vivid--weight-semibold--white-vivid--yellow-vividSlots
The kicker text.
Accessibility
Heading directly after it so the document outline stays correct. text-transform); the accessible text keeps its authored casing for screen readers. Code
Tones and tracking
The accent default against the muted emphasis tone and a status color from the full roster, at both tracking widths.
<xtyle-eyebrow>Themable-derivation engine</xtyle-eyebrow>
<xtyle-eyebrow tone="muted" tracking="wide">By the numbers</xtyle-eyebrow>
<xtyle-eyebrow tone="success">Now shipping</xtyle-eyebrow><script lang="ts">
import { Eyebrow } from "@xtyle/svelte";
</script>
<Eyebrow>Themable-derivation engine</Eyebrow>
<Eyebrow tone="muted" tracking="wide">By the numbers</Eyebrow>
<Eyebrow tone="success">Now shipping</Eyebrow>---
import { Eyebrow } from "@xtyle/astro";
---
<Eyebrow>Themable-derivation engine</Eyebrow>
<Eyebrow tone="muted" tracking="wide">By the numbers</Eyebrow>
<Eyebrow tone="success">Now shipping</Eyebrow>