Hero grid
BlockA centred hero over a grid of squares that light up under the pointer.
- Heroes
- 2 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add hero-gridimport { HeroGridBlock } from "@/components/blocks/hero-grid"; export default function Page() { return <HeroGridBlock />;}<HeroGridBlock>
| Prop | Type | Default |
|---|---|---|
colorsHover colours for the grid, any CSS colour. Up to five are used, cycled across the cells. Defaults to the theme's primary and status colours. | string[] | DEFAULT_COLORS |
description | string | "Accessible, composable building blocks for polished, animated interfaces — ready in minutes." |
headingLevelThe headline's level, so the block fits any page outline. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
highlightWords appended to the headline in the primary colour. | string | "confidence" |
primaryActionThe main call to action. | HeroGridAction | null | { label: "Learn more", href: "#" } |
secondaryActionThe quieter call to action. | HeroGridAction | null | { label: "Get started", href: "#" } |
titleThe headline. | string | "Build your next project with" |
Plus every attribute of <section> except title.
One section landmark named by its headline, whose level is a prop so the block fits any page outline. The hover grid is aria-hidden decoration made of plain elements, not buttons, so it adds no tab stops. Calls to action are real links. The entrance and the hover fade run on the motion scale and settle at rest under reduced motion.