# eyebrow

> The label above a headline, in one of five looks.

```ts
import { eyebrow } from "@sdxc/ui/styles";
```

The label above a headline, in one of five looks. `mono` and `soft` stay neutral,
`quiet` is a hairline pill for hero announcements, `pill` and `numbered` carry the
brand. Pills round at 1rem, so a label that wraps on a phone reads as a soft card. The
mono label's face, weight, case and tracking read `--ui-landing-eyebrow-*` tokens. Variants live in `data-variant`; a brand tints the mono label through
`--ui-landing-eyebrow-color`, and a linked eyebrow nudges its arrow on hover.

## Signature

```ts
eyebrow<Node extends Element = Element>(): MixinDescriptor<
	Node,
	[styles: CSSStyles],
	ElementProps
>
```

Returns: A `css()` mixin ready for an eyebrow `span` or `a`'s `mix` prop; set
`data-variant` on the host.

## Examples

```tsx
<span data-variant="mono" mix={[eyebrow()]}>{t("features.eyebrow")}</span>;
```

```tsx
<a href={post} data-variant="quiet" mix={[eyebrow()]}>{t("hero.news")}</a>;
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/styles` too.

### LandingSectionSpacing

How much block padding a landing band leaves around its content.
`"hero"` is the first viewport, `"normal"` the repeating mid-page rhythm,
`"compact"` a tighter strip such as a proof row, `"cta"` a closing band.

#### Signature

```ts
type LandingSectionSpacing = "hero" | "normal" | "compact" | "cta"
```

One of `"hero"`, `"normal"`, `"compact"`, `"cta"`.

### LandingDisplayLevel

Outline depth displayHeading sizes for: `1` is the page H1,
`2` a section chapter, `3` a quieter in-band title.

#### Signature

```ts
type LandingDisplayLevel = 1 | 2 | 3
```

### LandingLeadStep

Which lead landingLead sizes: a band's, or the larger hero step.

#### Signature

```ts
type LandingLeadStep = "band" | "hero"
```

One of `"band"`, `"hero"`.

### LandingEyebrowVariant

How an eyebrow reads: `mono` a quiet uppercase label for section headers,
`quiet` a hairline pill for hero announcements, `soft` a filled muted pill,
`pill` the brand pill, `numbered` a brand-ringed pill led by its index.

#### Signature

```ts
type LandingEyebrowVariant = "mono" | "quiet" | "soft" | "pill" | "numbered"
```

One of `"mono"`, `"quiet"`, `"soft"`, `"pill"`, `"numbered"`.