Skip to main content

Featured Card Group

What It Does​

Displays multiple featured cards together in either a responsive 3-column grid layout or a vertical stack, perfect for showcasing services, features, or team members.

When to Use It​

  • Displaying 2-6 services or features in a grid
  • Creating comparison cards side by side
  • Building a team or portfolio showcase
  • Presenting multiple options or plans

How to Add This Module​

  1. In the page builder, find "Featured Card Group" in the module list
  2. Drag it to where you want it on the page
  3. Click on it to open the settings panel

Settings Explained​

Content Tab​

You can add between 1 and 6 cards. Each card has its own settings panel.

Click on a card to expand its settings:

SettingWhat It DoesOptions
Show/Hide ElementsControl visibility of card elementsIcon Heading, Heading, Body, Toggles, Button
Icon HeadingSmall label textText, level, icon
Main HeadingCard title (often hidden by default)Text, level, color
Body ContentDescription textRich text, color, size
ButtonCall-to-actionText, link, style, size
Background TypeCard background stylePreset or Custom Image
Background PresetPredefined colorWhite, Black, Gray, Gray Gradient, Transparent

Card Management:

  • Click "+ Add" to add a new card
  • Drag cards to reorder them
  • Click the trash icon to delete a card
  • The sorting label shows the icon heading text for easy identification

Style Tab​

Layout Settings​

SettingWhat It DoesOptions
Layout TypeHow cards are arrangedStack (Vertical), Grid (3-Column, responsive)
Gap Between CardsSpacing between each cardNone, Extra Small, Small, Medium, Large, Extra Large, 2X Large

Example Setups​

Example 1: Services Grid (3 Cards)​

  1. Drag "Featured Card Group" to your page
  2. You'll see 3 default cards - customize each one:
    • Card 1: Set Icon Heading to "Social Media Marketing"
    • Card 2: Set Icon Heading to "Content Creation"
    • Card 3: Set Icon Heading to "Influencer Partnerships"
  3. For each card, add body content describing the service
  4. Add "Learn More" buttons linking to service pages
  5. In Style tab, set Layout Type to "Grid (3-Column, responsive)"
  6. Set Gap Between Cards to "Medium"

Example 2: Comparison/Pricing Cards​

  1. Drag "Featured Card Group" to your page
  2. Add 3 cards for different tiers
  3. For each card:
    • Turn ON Main Heading
    • Set Icon Heading to tier name (Basic, Pro, Enterprise)
    • Set Main Heading to price ($99, $199, $499)
    • List features in Body Content
    • Add "Get Started" button
  4. Use different Background Presets to highlight the recommended tier
  5. Set Layout Type to "Grid"

Example 3: Vertical Feature List​

  1. Drag "Featured Card Group" to your page
  2. Add 4-6 cards
  3. For each card, add an Icon Heading and brief description
  4. Turn OFF buttons for a cleaner look
  5. In Style tab, set Layout Type to "Stack (Vertical)"
  6. Set Gap Between Cards to "Small"
  7. Set Background Preset to "Transparent" for all cards

Example 4: Two Feature Cards​

  1. Drag "Featured Card Group" to your page
  2. Delete one default card (click trash icon)
  3. Customize your 2 remaining cards
  4. Set Layout Type to "Grid" - cards will automatically size to fill the row
  5. Set Gap Between Cards to "Large" for clear separation

Tips​

  • Use the Grid layout for 3 or 6 cards to create even rows
  • For 2 or 4 cards, the Grid still works well and cards will fill available space
  • The Stack layout works well for feature lists or when cards have varying content lengths
  • Keep content consistent across cards - same elements enabled, similar text lengths
  • Use the same Background Preset across all cards for a unified look, or vary them to highlight specific cards
  • The "Medium" gap works well for most layouts; use "Large" when cards have minimal content
  • Cards automatically become single-column on mobile devices in Grid mode
  • Sort cards by dragging them in the editor to control their display order