Icon Cards Component

Icon Cards Component

The Icon Cards Component presents information as a collection of visual cards, each combining an icon, a title, and a short description. It's an excellent way to communicate key ideas quickly while adding visual interest to your brand guide.

Whether you're highlighting services, explaining your brand values, or showcasing product features, Icon Cards make content easy to scan and understand.

Common Uses

The Icon Cards Component is ideal for:

• Brand values
• Product features
• Service offerings
• Key benefits
• Company principles
• Process summaries
• Quick-reference information
• Visual navigation sections

Because each card focuses on a single idea, they're perfect for presenting information in a concise, engaging format.

Layout Options

Cards Per Row

Choose how many cards appear in each row.

Common layouts include:

• One card per row for detailed explanations
• Two or three cards for balanced layouts
• Four or more cards for compact feature grids

Select the layout that best fits the amount of content in each card.

Card Content

Each card combines a visual element with supporting text.

Icon

Choose an icon or illustration from your brand's media library.

Simple, recognizable icons work best and help visitors quickly identify the purpose of each card.

Title

Give each card a short, descriptive heading.

Examples include:

• Fast Delivery
• Brand Values
• Accessibility
• Sustainability

Keep titles concise so they're easy to scan.

Description

Provide a brief explanation that expands on the title.

Descriptions should support the icon rather than repeat it, giving readers just enough information to understand the idea being presented.

Color Options

Customize the appearance of the section using optional color settings.

Available options include:

• Background color
• Title color
• Text color

If no colors are selected, the component automatically inherits your brand's default theme styling.

Organizing Cards

Cards can be added, removed, and reordered at any time.

Arrange related cards together or place the most important information first to create a logical reading order.

Theme Integration

The Icon Cards Component integrates directly with your brand theme.

You can:

• Select predefined theme colors
• Enter custom HEX values
• Leave fields blank to inherit your default styling

This helps maintain a consistent visual experience throughout your brand guide.

Saving Your Changes

Click Save Component to apply your updates.

The live preview refreshes automatically, allowing you to review the finished layout before returning to the Page Editor.

Tips

• Use simple, consistent icon styles throughout a page.
• Keep titles short and descriptions concise.
• Limit each card to a single idea for maximum readability.
• Arrange related cards together to create a clear visual flow.
• Pair Icon Cards with Paragraphs or Split Content sections to introduce or expand on important concepts.

Summary

The Icon Cards Component transforms key information into an organized, visually engaging grid.

By combining icons with concise text, it helps visitors quickly understand features, services, values, and other important information while maintaining a clean, professional appearance that integrates seamlessly with your brand guide.