Blocks · Features

Feature sections

Six feature patterns built from the LSD component library — .lsd-btn, .lsd-chip, .lsd-aspect, .lsd-frame, .lsd-img. Every layout uses CSS container queries so a block dropped into a 380px sidebar collapses to its mobile shape; the same block in a 1200px column uses its wide shape.

Three-up tiles

3 → 2 → 1 columns via container query at 880px / 560px.

.feature-3up.lsd-btn--ghost@container

◆

Fast on everything

Ships under 30 kB. Loads on slow phones.

Learn more →

◇

Brand-aware

One palette swap rolls the whole stack.

Learn more →

◉

Container-native

Layouts adapt to their container, not the viewport.

Learn more →

Feature with image

Stacks vertically below 760px container width.

.lsd-aspect--4-3.lsd-frame--shadowed.lsd-btn--primary

New in v0.8

Type-tight container queries

Authors size to their parent box. No more viewport-based media-query gymnastics for shells with sidebars, modals, or split layouts.

Read the docs View source

Container query · 4:3

Bento grid

Mixed-size cells; collapses to single column at narrow widths.

.feature-bento.cell--lg.cell--wide

Hero

Brand kit

OKLCH-native palettes with three weights.

Motion

27 named animation classes.

Z-tiers

Six elevation stops.

Container queries everywhere

Every block in this library uses container-type: inline-size.

Tokens

Single source of truth.

Surfaces

Role-driven contrast.

Icon-prefixed list

Single column; spacing tightens on narrow containers.

.feature-icon-list

◆

Single source of truth

Brand tokens drive components, blocks, and pages.

◇

Zero runtime cost

CSS variables; no JS framework tax.

◎

Accessible by default

Focus rings, reduced-motion, ARIA built in.

◉

Composable everywhere

Blocks are HTML — paste them anywhere.

Stat-pair cards

4 → 2 → 1 columns at 880px / 540px container width.

.feature-stat-pair.lsd-fx--scale-in

98%

Lighthouse

Average score on docs site.

28KB

CSS shipped

Brotli, complete framework.

JS deps

Core runs without a framework.

Toggle tabs

.lsd-segmented--pill switches between three feature panels with cross-fade.

.lsd-segmented--pill.lsd-fx--fade-in

Design with brand tokens

OKLCH-native palettes, surface roles, container-aware spacing scales.

Move with intent

27 named animation classes, reduced-motion compliant, all paint-cheap.

Ship anywhere

Static HTML output. Drop into WordPress, Next, or a flat file.