Setting Up a Card Grid

What You'll Build

A grid of 1-6 feature cards with icon headings, descriptions, and optional buttons. Perfect for showcasing services, features, or benefits in a visually organized layout.

Before You Start

• Plan how many cards you need (1-6 cards)
• Prepare content for each card (heading, description, optional button)
• Decide on your layout: vertical stack or responsive grid
• Have any custom SVG icons ready if not using Font Awesome

Step-by-Step Instructions

Step 1: Add the Featured Card Group Module

1. In the page editor, click the Add button in your desired section
2. Search for Featured Card Group
3. Click to add it to your page

What you'll see: A module with 3 default cards ready to customize.

Step 2: Configure Your First Card

1. Click on the first card in the Featured Cards list

2. Open Show/Hide Elements to control what appears:

   • Show Icon Heading: Label with icon (recommended ON)
   • Show Main Heading: Additional heading (often OFF for cards)
   • Show Body Content: Description text (recommended ON)
   • Show Button: CTA link (optional)

3. Configure the Icon Heading:

   • Enter your heading text (e.g., "Social Media Marketing")
   • Choose Font Awesome or Custom SVG icon
   • Select icon color and position

4. Add your Body Content:

   • Enter a brief description (2-3 sentences)
   • Keep it concise for card format

5. Set up the Button (if enabled):

   • Add button text like "Learn More"
   • Set the destination link

6. Choose a Card Background:

   • Select "Preset" for theme colors (white, black, gray)
   • Select "Image" to upload a background image

What you'll see: Your first card with icon, text, and styling.

Step 3: Add More Cards

1. Click the + Add button below the card list
2. Repeat Step 2 for each new card
3. You can add up to 6 cards total
4. Drag cards to reorder them

What you'll see: Multiple cards appearing in your grid.

Step 4: Remove Unused Cards

If you have more cards than needed:

1. Click on the card you want to remove
2. Click the Delete icon (trash can)
3. Confirm the deletion

What you'll see: The card is removed from your grid.

Step 5: Configure Layout Settings

1. Switch to the Style tab
2. Open Layout Settings
3. Choose your Layout Type:
   • Stack (Vertical): Cards display in a single column
   • Grid (3-Column, responsive): Cards display in a grid that adjusts for screen size
4. Set the Gap Between Cards (S, M, L, XL)

What you'll see: Cards arranged according to your layout choice.

Common Settings

Setting	What It Does	Recommended Value
Layout Type	How cards are arranged	Grid for 3+ cards, Stack for vertical lists
Gap Between Cards	Spacing between each card	Medium (M) for balanced look
Show Icon Heading	Display icon with label	ON for feature cards
Show Main Heading	Display additional heading	OFF for most card layouts
Background Type	Card background style	Preset "white" for clean look
Button Style	CTA button appearance	Gradient for primary actions

Tips and Best Practices

• Use consistent content length across all cards for visual balance
• Keep card descriptions to 2-3 sentences maximum
• Use the same icon style for all cards (all Font Awesome or all custom)
• Choose backgrounds that contrast with your section background
• For 4 cards, consider using a 2x2 grid layout
• Test on mobile to ensure cards stack properly

Image Sizing for Card Backgrounds

If using background images on cards:

Image Type	Recommended Size	Format
Card background	600 x 400 px (minimum)	JPG or PNG
Card background (retina)	1200 x 800 px	JPG or PNG
Icon (custom SVG)	64 x 64 px	SVG

Troubleshooting

Problem: Cards are different heights. Solution: Make sure all cards have similar content length. Remove extra empty space in descriptions.

Problem: Grid layout shows uneven columns. Solution: Check that you have 3 or 6 cards for even grid distribution, or use Stack layout.

Problem: Icons look different sizes. Solution: Use the same Icon Position setting for all cards. For custom SVGs, ensure they have consistent dimensions.

Problem: Card backgrounds are not visible. Solution: Check that Background Type is set correctly. If using Image, verify the image was uploaded successfully.

Problem: Too much spacing between cards. Solution: Reduce the Gap Between Cards setting in Layout Settings.

Problem: Cards look cramped on mobile. Solution: This is normal behavior - cards stack vertically on mobile. Reduce content length if needed.