Card Group

Create collections of cards with consistent styling for features, services, or team members

Create collections of styled cards with visual elements. Each card has specific, fixed fields available.

Quick Reference

• Structure: Group container with individual cards

• Fixed fields per card:

  • Title input (20 character max)

  • Description textarea (multi-line)

  • Optional "Learn More" link

  • Visual element (based on group setting)

• Visual types: None, Emoji, Icon, or Image (group-wide setting)

• Group styling: Background color, text color, opacity, alignment

• Layout: Responsive grid arrangement

Adding Card Groups

Method 1: Drag from Right Sidebar

1. Click the Cards category in the right sidebar

2. Find Cards in the dropdown

3. Drag it onto your page where you want it

4. Click to start editing cards

Method 2: Slash Command

1. Type /cards on empty line

2. Card group appears with six placeholder cards

3. Add or remove cards via menubar

Understanding the Structure

• Card Group: The parent container that controls visual style

• Individual Cards: Child elements with fixed structure:

  • Title field (text input, 20 chars max)

  • Content field (textarea for description)

  • Optional "Learn More" link

  • Visual element (emoji/icon/image)

⚠️ Important: Cards are not generic containers. You cannot place other blocks (videos, buttons, images) inside a card. Each card has these specific fields only. If you need a flexible container that can hold any type of content, please use columns instead.

Card Group Configuration

Visual Type (Group Setting)

Choose decoration for all cards:

• None: Plain cards

• Emoji: Pick emoji for each card

• Icon: Select icon per card

• Image: Upload image for each

Group Styling (Applies to All Cards)

• Background Color: Choose from palette

• Text Color: Manual or auto-select

• Opacity: 0-100% for backgrounds

• Alignment: Left, center, or right

Show Link Toggle

• Enable/disable "Learn More" links

• Links appear on all cards when enabled

• Configure each card's link individually

Managing Cards

Add/Remove Cards

• Click "Manage Items" in toolbar

• Add as many cards as needed

• Drag to reorder

• Delete individual cards

Common Use Cases

Feature Lists

🚀 Fast Performance
Optimized for speed with
lightning-fast load times
→ Learn more

Team Directory

[Photo]
Sarah Johnson
VP of Sales
Leading our enterprise team
→ View profile

Service Offerings

💼 Consulting
Expert guidance for your
business transformation
→ Get started

Best Practices

• Consistent content: Keep text lengths similar

• Visual balance: Use same visual type for all

• Clear titles: Make them scannable

• Concise content: 2-3 lines ideal

• Meaningful links: Not just "Learn more"

Design Tips

Visual Type Selection

• None: Text-focused content

• Emoji: Friendly, informal

• Icon: Professional, clean

• Image: Visual impact

Color Combinations

• Light background + dark text

• Brand color + white text

• Auto-select for contrast

• Consistent opacity

Responsive Behavior

Cards use a flexible wrap layout that automatically adjusts to screen size:

• Cards wrap to fit the available width

• Wider screens show more cards per row

• Mobile devices typically display a single column

• All cards maintain equal heights within each row

Troubleshooting

Cards look empty

• Add title and content

• Check visual type setting

• Verify show link toggle

Styling not applying

• Settings are group-level

• Individual cards inherit

• Check opacity values

Can't add blocks to cards

• Cards have fixed fields only

• Use title and content fields

• For complex layouts, use Columns

Related Features

• Testimonial Group: Customer quotes

• Columns: Flexible layouts

• Toggle Group: Expandable content