FeatureGrid
Feature section — AutoGrid of items with optional title, description, and icon slots. Icons are optional; the grid works text-only. Replace demo content before shipping.
Category: layout · WCAG 2.1-AA · section, features, grid
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | FeatureItem[] | — | Array of feature items with title, optional description, icon, and href |
title | ReactNode | — | Section heading above the grid |
description | ReactNode | — | Subheading below the section title |
headingLevel | 1 | 2 | 3 | 2 | Heading level for the section title (items use headingLevel + 1) |
min | string | "16rem" | Minimum track width forwarded to AutoGrid |
Design tokens
--cascivo-text-2xl--cascivo-text-base--cascivo-text-sm--cascivo-font-bold--cascivo-font-semibold--cascivo-text-secondary--cascivo-color-border--cascivo-surface-subtle--cascivo-space-*
When to use
- A feature section laying out items in an auto-fitting grid
- Showcasing product capabilities with optional icons and descriptions
When not to use
- A single hero message — use Hero
- A bare responsive grid without section framing — use AutoGrid
Examples
Feature grid (text-only)
Four-item text-only feature grid with section heading
<FeatureGrid
title="Built for production"
description="Everything you need to ship a polished product."
items={[
{ title: 'Zero config', description: 'Copy a component and it works — no providers, no wrappers.' },
{ title: 'Token-first', description: 'Every color, size and radius is a CSS custom property you own.' },
{ title: 'Signal-driven', description: 'Fine-grained reactivity with @preact/signals-react — zero re-renders.' },
{ title: 'Accessible by default', description: 'WCAG 2.1 AA, keyboard navigable, logical CSS properties for RTL.' },
]}
/>