displayHeading
Sets display typography for a landing headline.
import { displayHeading } from "@sdxc/ui/styles";Usage
Sets display typography for a landing headline. Level 1 is the page H1, sized
fluidly from 42px to 72px (or --ui-landing-display-max) with leading that tightens
as it grows; level 2 is the band chapter at two thirds of that, so the H1:H2 ratio
holds at 1.5:1 at every width. Sizes read cqi, so a headline in a narrow column steps
down on its own.
Signature
displayHeading<Node extends Element = Element>(level?: LandingDisplayLevel): MixinDescriptor<Node, [styles: CSSStyles], ElementProps>Returns a css() mixin ready for a heading's mix prop.
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
level | LandingDisplayLevel | No | Outline depth. Defaults to 1 (page H1). |
Examples
<h1 mix={[displayHeading()]}>{title}</h1>;<h2 mix={[displayHeading(2)]}>{chapter}</h2>;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"