Features icon grid
BlockA features section: a grid of cards, each an icon, a title and a sentence, rising into view as the page scrolls.
- Sections
- 1 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add features-icon-gridimport { DEFAULT } from "@/components/blocks/features-icon-grid"; export default function Page() { return <DEFAULT />;}<FeaturesIconGridBlock>
| Prop | Type | Default |
|---|---|---|
description | ReactNode | "Production-ready components with motion, accessibility and types built in." |
features | FeatureIconItem[] | DEFAULT_ICON_FEATURES |
headingThe section heading. | ReactNode | "Everything you need to build" |
headingLevelLevel of the section heading; each feature title is one level below. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
Plus every attribute of <section> except title.
One section landmark, named by its heading, whose level is set with `headingLevel`; feature titles sit one level below it so the block fits any page outline. The features are a real list, and icons are decorative (aria-hidden) — the title carries the meaning. Only a grid that starts below the fold is hidden before it scrolls in, so nothing on screen flashes, and under reduced motion or without IntersectionObserver nothing is hidden at all.