Content Blocks
Bento Grid
Bento grid FAQ with masonry expand effects.
faqbentogridmasonry
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
faqs | Array<{q: string, a: string}> | [] | Array of FAQ items with question (q) and answer (a). |
backgroundColor | string | #171717 | Background color (hex, rgb, or hsl). |
title | string | Knowledge Base | Section title text. |
titleColor | string | #ffffff | Title text color. |
cardBgColor | string | #262626 | Card background color. |
activeCardBgColor | string | #4f46e5 | Active card background color. |
activeCardTextColor | string | #e0e7ff | Active card text color. |
inactiveCardBgColor | string | #262626 | Inactive card background color. |
inactiveCardTextColor | string | #a3a3a3 | Inactive card text color. |
iconBgColor | string | #171717 | Icon background color. |
iconColor | string | #ffffff | Icon color. |
badgeBgColor | string | rgba(255,255,255,0.1) | Badge background color. |
badgeTextColor | string | #ffffff | Badge text color. |
fillerEmoji | string | 👋 | Filler block emoji. |
fillerTitle | string | More questions? | Filler block title text. |
fillerSubtitle | string | Chat with us | Filler block subtitle text. |
fillerBgColor | string | #262626 | Filler block background color. |