Switchboard Card
betaA feature card illustrated by a grid of tiny lights — a lit pattern such as a word, or random flicker.
- Display
- 1 file
- 2 npm packages
- Accessibility notes
pnpm dlx @dowel-ui/cli add switchboard-cardnpm packages installed: class-variance-authority, radix-ui.
import { SwitchboardCard } from "@/components/ui/switchboard-card";Default
Gallery
As Link
As Button
<SwitchboardCard>
| Prop | Type | Default |
|---|---|---|
heading (required)The card's heading. | ReactNode | — |
columnsLights per row. | number | 18 |
descriptionSupporting text under the heading. | ReactNode | — |
gridPatternLights to hold on: a flat row-major array or a | number[] | number[][] | — |
headingAsThe heading element, so the card fits the page's outline. | "h2" | "h3" | "h4" | "p" | "h3" |
hrefMakes the whole card a link. | string | — |
illustrationLabelDescribes the illustration when it means something (a pattern spelling a word). Without it the lights are decorative and hidden from assistive technology. | string | — |
intervalMilliseconds between flicker steps. | number | 200 |
randomLightsFlicker random lights instead of showing a pattern. | boolean | false |
rowsRows of lights. | number | 5 |
seedSeed for the still frame shown under reduced motion. | number | 1 |
variant | "default" | "inverted" | "default" |
asChildRenders the child element (a router link, a button) as the card. | boolean | false |
Plus every attribute of <div> except title.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes