Feature Cards Grid

What it does

The feature cards grid lays out what your product does as a rhythm of tidy cards: an icon, a bold title, two lines of text each. Alternating card backgrounds keep the grid feeling alive instead of like a spreadsheet.

• Descriptions trim at two lines, so every card stays the same height.
• A centered intro tops it: a little eyebrow badge, a heading, and one line.
• Backgrounds alternate between your card color and a soft tint of your accent.
• Icons stay one consistent family, drawn in your colors.
• A gentle hover lift is optional, desktop only, and skipped for less-motion visitors.
• Describe what the product actually does; invented metrics and superlatives are banned.
• Three columns on desktop, two on tablets, one clean column on phones, and a short last row centers itself.

How it works

1. 01

   Slide the card count, 3 to 6 features.

2. 02

   Pick the icon tiles, filled with a soft tint or clean outlines.

3. 03

   Copy the prompt, the grid's build plan for your AI, into whichever AI you use.

4. 04

   Write your real features into the marked list, an icon, a title, and a two-line description each, in your customer's words.

5. 05

   Skim the finished grid: every title should name a real thing your product does, no invented metrics anywhere.

6. 06

   Shrink the window slowly: the grid should fold from three columns to two to one without a single awkward gap.

What you can customize

• How many cards: three or four for focus; six when the product genuinely does that much and each one earns a card.
• Icon tiles: filled adds a pop of your accent color; outline keeps things quiet and typographic.
• Colors, icons, and spacing adapt to your site automatically, because your AI builds the grid right inside your own design, tint for tint.