eyebrow
The label above a headline, in one of five looks.
import { eyebrow } from "@sdxc/ui/styles";Usage
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
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
<span data-variant="mono" mix={[eyebrow()]}>{t("features.eyebrow")}</span>;<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.
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"