Stroke Cards
SVG path-drawing animation with masked image hover reveals. Each card traces its border on hover.
Props
7 total| Prop | Type | Default | Description |
|---|---|---|---|
| cards* | Array<{ id: string; imgSrc?: string; imgAlt?: string; title?: string; strokeColor1?: string; strokeColor2?: string; titleColor?: string; borderRadius?: string; className?: string }> | — | Array of card objects. Each card has: id (unique identifier), imgSrc (image URL), imgAlt (image alt text), title (hover text), strokeColor1 (primary stroke), strokeColor2 (secondary stroke), titleColor, borderRadius, className |
| columns | 2 | 3 | 4 | 2 | Number of cards per row in the grid |
| gap | string | "1rem" | CSS gap value between cards (e.g., '1rem', '20px') |
| padding | string | "0 2rem" | CSS padding around the grid container |
| minCardWidth | string | "280px" | Minimum width of each card |
| maxCardWidth | string | "400px" | Maximum width of each card |
| className | string | "" | Additional CSS classes for the container |