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 |
|---|---|---|---|---|
Anatomy
The named parts that make up the component, with their selectors.
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-vivid
Slots
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>