Benefits Section

Highlight product benefits in a structured layout.

Overview

Benefits Section displays benefits in either a grid or list layout with optional icons. Supports 2, 3, or 4 column grid layouts that adapt to screen size.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Props

• title - Section title (optional)
• description - Section description (optional)
• benefits - Array of benefit objects (required)
• layout - Layout type: "grid" | "list" (optional, default: "grid")
• columns - Number of columns: 2 | 3 | 4 (optional, default: 3)
• className - Additional CSS classes (optional)

Benefit

• title - Benefit title (required)
• description - Benefit description (required)
• icon - Icon element (optional, defaults to CheckCircle2)

Install

1

Accessibility

Benefits Section uses semantic HTML with proper heading hierarchy. All benefits are keyboard accessible and screen reader friendly. Compliant with WCAG 2.1.