Section
The marketing layout backbone: a toned, padded band with the shared 1280px container, plus the Eyebrow and SectionHeading label/title pair.
bunx shadcn@latest add @nx-ui/sectionSection tones
Four surface tones. default and muted flip with the theme; brand and invert are navy-anchored (the accent eyebrow reads against navy).
Default
A default surface
bg-primary — the standard page tone that flips light and dark.
Muted
A muted surface
bg-secondary — a subtle step down to separate adjacent bands.
Brand
A brand-tinted surface
bg-brand-25 — a faint navy wash for a warmer band.
Invert
An inverted brand surface
bg-brand-600 — solid navy with white copy and an accent eyebrow.
Vertical rhythm
Three padding sizes set the band's breathing room: sm, md (default) and lg.
size=sm
size=md
size=lg
Centred heading
SectionHeading aligns left by default; align=center centres the eyebrow, title and subtitle for a symmetrical section intro.
How it fits together
One backbone, every page
Section sets the surface and rhythm; SectionHeading sets the intro. Everything else in the marketing family drops inside.
Eyebrow on its own
The uppercase label used above headings — brand-coloured on light surfaces, accent-yellow with onBrand for navy panels.
On a light surface
On a brand surface