Feature Grid
A responsive grid layout for displaying feature cards. Pairs with the Feature component.
It lays every feature out on the same footing — a uniform matrix of equal cards. When your features are genuinely unequal — one headline capability, a few supporting ones — reach for bento grid instead: its cells claim different amounts of space, so the eye gets a hierarchy rather than a grid.
Basic Usage
Server-Rendered
Flexible
Accessible
Two Columns
Open Source
Laravel Native
With Icons
Easy Setup
Dark Mode
No Lock-in
Cascading Stagger
Pair an entrance reveal on the children (or the grid wrapper) with stagger to make each card animate in with an incremental delay — produces a clean cascade instead of every card landing at once:
Server-Rendered
Flexible
Accessible
stagger (boolean) uses the default 75ms step. Pass an integer for a custom rhythm:
<x-wirekit::feature-grid cols="1 sm:2 lg:3" :stagger="125">
{{-- each child waits an additional 125ms before its entrance fires --}}
</x-wirekit::feature-grid>
Stagger uses CSS-only :nth-child rules — no JS — and caps at index 8 to avoid runaway delays on long lists. Honors prefers-reduced-motion: reduce (delays collapse to 0).
Custom Stagger via CSS
The stagger prop emits a .wk-stagger class on the grid wrapper and sets --wk-stagger-step inline. You can also drive the stagger from CSS directly — useful when the step value depends on viewport size, external state, or a media query.
CSS contract
| Selector | Effect |
|---|---|
.wk-stagger > *:nth-child(N) |
Each child gets animation-delay: calc((N - 1) × var(--wk-stagger-step)). |
--wk-stagger-step |
The per-child increment. Default 75ms when emitted via the stagger prop. Overrideable per-instance via style="--wk-stagger-step: …" OR globally via :root {}. |
| Cap | :nth-child(N) rules cap at index 8 so the final visible delay stays under ~600 ms by default. |
Example: viewport-relative step
Slow cascade
Slow cascade
Slow cascade
{{-- Step scales with viewport — tighter cascade on phones, roomier on desktop --}}
<x-wirekit::feature-grid cols="1 sm:2 lg:3" stagger style="--wk-stagger-step: clamp(50ms, 1vw, 150ms)">
{{-- … --}}
</x-wirekit::feature-grid>
Honors prefers-reduced-motion: reduce — every child's delay collapses to 0 inside the global reduced-motion block, regardless of the --wk-stagger-step value.
See Public CSS API → wk-stagger for the full contract + stability tier.
Props
Feature Grid
| Prop | Type | Default | Description |
|---|---|---|---|
cols |
string|int | '1 sm:2 lg:3' |
Column configuration (responsive string or number) |
gap |
string | 'lg' |
Gap between items: none, sm, md, lg, xl |
scale |
string | 'space' |
Which spacing ladder gap names a rung on: space (the default, unchanged) or gap for the tighter --gap-wk-* ladder — see the note below the props |
stagger |
bool|int|null | null |
When true, cascades child entrance animations at 75ms steps. Pass an integer to override the step (e.g. :stagger="125"). |
scope |
string|null | null |
Scoped personalization name |
The rung names are shared with a second ladder, and the values are not. scale="space" (the default) reads --space-wk-*; scale="gap" reads the tighter --gap-wk-* ladder, which uses the same rung labels with different values from md up and is what WireKit's own components read for spacing inside a component. The rung name alone does not tell you which — gap="md" is 1rem on one ladder and 0.75rem on the other — so changing scale without changing gap re-spaces the container on purpose, and swapping a raw utility for a rung of the same name re-spaces it by accident. See Two spacing ladders, same rung names.
| Rung | scale="space" (default) |
scale="gap" |
|---|---|---|
sm |
0.5rem |
0.5rem |
md |
1rem |
0.75rem |
lg |
1.5rem |
1rem |
xl |
2.5rem |
1.5rem |
Feature
Documented on its own page: Feature — props, slots and pitfalls. The table that stood here listed a subset and drifted; a component with a page of its own is cross-linked rather than re-pasted, because the copy is always the one that rots.
Keyboard Interaction
This component is purely presentational and does not respond to keyboard input.
Design Tokens
The Feature Grid is a layout-only wrapper — it composes child Feature entries inside a Tailwind grid layout (grid-cols-{n} per breakpoint). The wrapper itself does not reach for theme tokens; per-feature colors, icon chips, and typography come from the inner Feature component.