CardsWithBullets Component
Cards with an icon, description, and bullet point list. Great for feature highlights.
2 Columns (Default)
Two Column Layout
First Feature
This is the main description for the first card.
- Bullet point one
- Bullet point two
- Bullet point three
Second Feature
This is the main description for the second card.
- Another bullet point
- And one more
- Last one here
3 Columns
Three Column Layout
Feature One
Description for first card.
- Point A
- Point B
Feature Two
Description for second card.
- Point C
- Point D
Feature Three
Description for third card.
- Point E
- Point F
Single Card
Single Card Example
Standalone Feature
Sometimes you only need one card to highlight a key feature.
- Detailed bullet point explaining the first benefit
- Another important detail about this feature
- One more reason why this matters
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | Section heading |
cards | array | required | Array of card objects |
columns | 2 | 3 | 4 | 2 | Number of columns in the grid |
Card Object
| Property | Type | Description |
|---|---|---|
title | string | Card heading |
description | string | Main description text |
bullets | string[] | Array of bullet points |
icon | ReactNode | Optional custom icon |