Skip to main content
xoji

Eyebrow
Info:Layout html svelte astro Success: coverage 7/7

The small uppercase kicker that sits above a heading.

Live demo

live · @xoji/astro

Eyebrow

The three-step hierarchy

Themable-derivation engine

One algorithm, a whole system

An eyebrow leads, a heading follows, body text grounds it — no bespoke CSS, just the stack's gap doing the spacing.

Tones and tracking

accent · normal

muted · normal

subtle · normal

accent · wide

muted · wide

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, and 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.

Lead a Section or a Card header with an Eyebrow, then a Heading, then Text: a three-step hierarchy with no bespoke CSS.
Inside a gap-controlled Stack, the Eyebrow needs no margin; the stack's gap sets the rhythm.
Use tone="muted" where an accent kicker would compete with nearby accent color.

Props

3 props, straight from the manifest.

PropTypeDefaultBindingsDescription
as EyebrowTag
p span div
p
html svelte astro
The element to render: a block `p`/`div` kicker or an inline `span`.
tone EyebrowTone
accent muted subtle
accent
html svelte astro
The ink: accent by default, or a quieter `muted` / `subtle`.
tracking EyebrowTracking
normal wide
normal
html svelte astro
Letter-spacing: `normal` (0.08em) or `wide` (0.12em) for a more deliberate label.

Anatomy

The named parts that make up the component, with their selectors.

eyebrow

 .xoji-eyebrow

The kicker root carrying the tone and tracking classes.
--font-sans --text-xs --weight-semibold --leading-tight --accent-text

Tokens & coverage

What the component consumes, checked live against what the algorithm produces.

Success:fully covered 7/7 consumed tokens produced default register: 276 tokens

Live coverage check against the xoji-default register (derive(xojiDefault, { anchors }) → coverComponent(manifest, register)). Every token this component consumes must be a key the algorithm produces.

--accent-text --fg-2 --fg-3 --font-sans --leading-tight --text-xs --weight-semibold

Slots
default
html svelte astro

The kicker text.

Accessibility
An eyebrow is a visual label, not a heading. Keep the real Heading directly after it so the document outline stays correct.
The uppercasing is presentational (text-transform); the accessible text keeps its authored casing for screen readers.

Code

Tones and tracking

The accent default against the muted and subtle tones, at both tracking widths.

 
<xoji-eyebrow>Themable-derivation engine</xoji-eyebrow>

<xoji-eyebrow tone="muted" tracking="wide">By the numbers</xoji-eyebrow>
 
<script lang="ts">
	import { Eyebrow } from "@xoji/svelte";
</script>

<Eyebrow>Themable-derivation engine</Eyebrow>

<Eyebrow tone="muted" tracking="wide">By the numbers</Eyebrow>
 
---
import { Eyebrow } from "@xoji/astro";
---

<Eyebrow>Themable-derivation engine</Eyebrow>

<Eyebrow tone="muted" tracking="wide">By the numbers</Eyebrow>