Bento & Layout

Repeating zig-zag feature rows with media and copy flipping sides each row, and an optional per-row full-bleed background.

Astro

Reserves a stable aspect ratio for media to prevent layout shift, using the native CSS aspect-ratio property.

Astro

Breakpoint-free responsive card grid using CSS grid auto-fit/minmax, column count is purely a function of container width.

Astro

Single card shell component with five variants (icon, stat, image, chart-slot, quote) sharing one accessible article shell.

Astro

Responsive 4-cell bento grid, 1 column on phone and 2x2 on tablet/desktop, with four named slots.

Astro

Feature-led bento grid with one wide lead cell plus three supporting cells, built with CSS grid-template-areas.

Astro

Responsive 6-cell bento grid, 1/2/3 columns across phone/tablet/desktop with slots in reading order.

Astro

A configurable mosaic where every cell declares its own span through a data prop, instead of a fixed bento template.

Astro

Bento layout with one tall feature cell spanning two rows beside two stacked supporting cells.

Astro

An interactive peeking card stack with Prev/Next and dot controls, inert isolation on background cards and a live-region status announcement.

Astro

Reliable two-axis centring primitive with a flex or grid method and explicit known-height or min-height sizing.

Astro

Horizontal wrapping group primitive for tag lists, pills, and button groups using flex-wrap plus gap.

Astro

A named-region app shell — header strip, sidebar, main and optional right rail — via CSS grid-template-areas, built to mount once per app lifetime.

Astro

Solid, dashed, gradient-fade, and labelled divider variants with correct semantic markup for each.

Astro

Escapes a centred max-width container to span the full viewport using the calc(50% - 50vw) technique, with a re-centred inner column.

Astro

General-purpose 12-column responsive grid container where children control their own span with plain col-span utilities.

Astro

Self-contained responsive horizontal padding plus centred max-width wrapper with no dependency on any host project's CSS variables.

Astro

ImagePairGrid — bare responsive image grid, no heading or copy slot.

Astro

Pinterest-style masonry grid using native CSS multi-column layout with break-inside-avoid, zero JS.

Astro

Two cards with a deliberate offset overlap using pure CSS positioning, collapsing to a simple stack on mobile.

Astro

Centred reading-measure column for long-form copy with sane default heading, link, and list styling.

Astro

Horizontal scroll-snap row for cards or logos with an optional edge-fade mask, pure CSS and no carousel library.

Astro

Eyebrow, title, subtitle, and optional trailing action block with a required explicit heading level prop.

Astro

Explicit, aria-hidden vertical or horizontal gap element for one-off spacing between unrelated blocks, with a flex-grow mode.

Astro

Even two-column split section that stacks to one column on mobile, with an optional mobile reorder flag.

Astro

60/40 split section where one column sticks in the viewport while the other scrolls past it, desktop only.

Astro

Vertical rhythm primitive that spaces children with flex gap instead of margin-stacking.

Astro

Pinned sidebar with its own internal scroll next to a scrolling main content column, desktop only.

Astro

Scrollytelling steps: a numbered step list beside a pinned visual that swaps per step through IntersectionObserver-driven active-step tracking.

Astro

Classic three-feature row that collapses to two then one column per breakpoint.

Astro

Newspaper-style two-column long-form copy split with explicit column slots, stacking to one column below desktop.

Astro