# landingHairline

> A translucent 1px rule along the block-start edge — the hairline a sticky header, footer, or band uses to separate itself from what sits above.

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

A translucent 1px rule along the block-start edge — the hairline a sticky header,
footer, or band uses to separate itself from what sits above. It takes the tone of
whatever is behind it, and high contrast promotes it to the strong border.

## Signature

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

Returns: A `css()` mixin ready for a host element's `mix` prop.

## Examples

```tsx
<header mix={[landingHairline()]}>{nav}</header>;
```

## 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"`.