GridBackground
Decorative grid pattern background for hero sections, landing pages, and content areas. Supports three grid sizes and an optional fade overlay.
Grid Sizes
Preview
Small Grid (20px)
Medium Grid (40px)
Large Grid (80px)
Without Fade
Preview
No fade overlay
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| gridSize | "sm" | "md" | "lg" | "md" | Size of the grid cells. sm = 20px, md = 40px, lg = 80px. |
| animated | boolean | false | Whether to animate the grid background. |
| fade | boolean | true | Applies a vertical gradient overlay that fades the grid into the background at the top and bottom edges. |
| children | ReactNode | - | Content to render on top of the grid background. |
| className | string | - | Additional CSS classes for the container. |
Accessibility
- The grid pattern is purely decorative and does not affect content readability.
- Content placed inside should maintain sufficient color contrast against the grid background.
- The fade overlay helps ensure text remains readable near the top and bottom edges.