Feature 01

About this block

Feature 01 is a three-column icon card grid that displays product benefits with a Lucide icon, a short title, and a one-sentence description per card. Built with shadcn/ui Card components and Tailwind CSS grid, it automatically wraps to a single column on mobile and two columns on tablet. The icon, title, and description for each card are passed as data — no need to edit JSX to add or remove features. Dark mode is inherited from the shadcn/ui theme.

When to use it

• SaaS and marketing landing pages that need to communicate 3, 6, or 9 product benefits at a glance
• Sections that follow the hero and expand on the value proposition with supporting detail
• Products with distinct, independently valuable features that don't require visual screenshots
• Pages where load time matters and you want feature content without heavy images

Notes

Stick to 3, 6, or 9 cards for a clean grid. Fewer than 3 or non-multiples of 3 will leave orphan cards on desktop — add a placeholder or use a different layout.

Frequently asked questions

How many feature cards should I use?

Stick to 3, 6, or 9 for a clean grid — other counts leave orphan cards on desktop.

Do I need to edit JSX to change the features?

No, the icon, title, and description for each card are passed as data, not hardcoded in JSX.

Does it support custom icons?

Yes, any Lucide icon can be passed per card.