landingHairline
A translucent 1px rule along the block-start edge.
import { landingHairline } from "@sdxc/ui/styles";Usage
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
landingHairline<Node extends Element = Element>(): MixinDescriptor<
Node,
[styles: CSSStyles],
ElementProps
>Returns a css() mixin ready for a host element's mix prop.
Examples
<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.
type LandingSectionSpacing = "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.
type LandingDisplayLevel = 1 | 2 | 3LandingLeadStep
Which lead landingLead sizes: a band's, or the larger hero step.
type LandingLeadStep = "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.
type LandingEyebrowVariant = "mono" | "quiet" | "soft" | "pill" | "numbered"