Content Blocks
Bento Grid
Modern bento grid feature section with interactive hover effects.
featurebentogridinteractive
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
features | Array<{title: string, desc: string, icon: LucideIcon, span?: string, color: string}> | [] | Array of feature items with title, description, icon, optional span, and color. |
backgroundColor | string | #000000 | Background color (hex, rgb, or hsl). |
badgeText | string | System Architecture | Badge text displayed above title. |
title | string | Built for scale. | Section title text. |
subtitle | string | Designed for speed. | Section subtitle text. |
badgeColor | string | #a78bfa | Badge background color. |
titleColor | string | #ffffff | Title text color. |
cardBgColor | string | #171717 | Card background color. |
cardBorderColor | string | rgba(255,255,255,0.1) | Card border color. |
cardTitleColor | string | #ffffff | Card title text color. |
cardDescColor | string | #a3a3a3 | Card description text color. |