The Icon Cards Component lets you build a grid of small cards, each containing an icon, a title, and a short description.
It’s perfect for:

• Brand values
• Product features
• Service offerings
• Quick‑hit informational blocks
• Visual summaries
• Icon‑based navigation sections

You can add as many cards as you want, reorder them, and customize layout and colors to match your brand.

🌟 What You Can Do with the Icon Cards Component

Inside this component, you can:

• Choose how many cards appear per row
• Customize background, title, and text colors
• Add unlimited icon cards
• Select icons from your uploaded images
• Add a title and description to each card
• Reorder cards with drag‑and‑drop

It’s a simple, flexible way to present structured information visually.

🧭 Component Overview

When you open the Icon Cards Component in the Component Editor, you’ll see three main sections:

1. Layout Settings

Cards Per Row

Choose how many cards appear in each row:

• 1 per row — large, full‑width cards
• 2 per row — balanced layout
• 3 per row — common for features/values
• 4 per row — compact grid

This gives you control over how dense or spacious the layout feels.

2. Color Settings

You can customize:

Background Color

Sets the background behind the entire icon card section.

Title Color

Controls the color of each card’s title.

Text Color

Controls the color of the description text.

All color fields support:

• HEX values
• Theme color presets
• Leaving blank to use default styling

This ensures your icon cards stay visually consistent with your brand.

3. Card Management

This is where you build your icon cards.

➕ Add Card

Click + Add Card to create a new card.

Each card includes:

Icon

Choose an image from your uploads.
Supported formats include:

• PNG
• JPG
• WEBP
• SVG

Icons should ideally be simple, square images for best results.

Title

A short heading for the card.
Examples:

• “Fast Delivery”
• “Brand Values”
• “User‑Friendly”

Text

A short description or supporting detail.
Examples:

• “Our platform is designed for speed and reliability.”
• “These values guide our brand decisions.”

🔁 Reordering Cards

Cards can be reordered using drag‑and‑drop:

• Grab the ⋮⋮ handle
• Drag the card to a new position
• The order updates instantly

This makes it easy to group related cards or arrange them by importance.

🗑 Deleting Cards

Each card includes a Delete Card button inside its panel.

Removing a card updates the layout automatically.

🎨 Theme‑Aware Color Options

All color pickers automatically pull from your brand’s theme colors, including:

• Light / dark backgrounds
• Highlight colors
• Typography colors

This ensures your icon cards blend seamlessly with the rest of your guide.

💾 Saving Your Changes

As you edit:

• Fields update the component’s JSON automatically
• The preview refreshes in real time
• Click Save Component to finalize your changes

Your icon cards will now appear on the page exactly as configured.

🎯 Summary

The Icon Cards Component helps you:

• Present information in a clean, visual format
• Add icons, titles, and descriptions
• Customize layout and colors
• Reorder cards with drag‑and‑drop
• Build polished, professional feature or value sections

It’s a versatile component that works beautifully across many types of brand guide pages.