VN Hero Cards

What It Does

Creates eye-catching hero-style cards with background images, overlay text including a title and subtitle, descriptive content, and a call-to-action button.

When to Use It

• Building a hero section with multiple featured items
• Creating service category showcases
• Displaying portfolio or case study previews
• Making visual navigation cards for main site areas

How to Add This Module

1. In the page builder, find "VN Hero Cards" 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

Cards

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

Click on a card to expand its settings:

Setting	What It Does	Options
Background Image	The large image behind the card content	Image picker
Title	Main heading displayed on the card	Any text
Subtitle	Category or secondary label	Any text
Content	Description text for the card	Rich text editor
Card Button	Call-to-action button	See button settings below

Button Settings (within each card):

Setting	What It Does	Options
Button Text	Text displayed on the button	Any text
Button Link	Where the button goes when clicked	URL, page, or file
Accessibility - ARIA Label	Screen reader description	Optional text

Card Management:

• Click "+ Add" to add a new card (up to 4 total)
• Drag cards to reorder them
• Click the trash icon to delete a card
• Cards are sorted by their Title in the editor for easy identification

Example Setups

Example 1: Service Categories (3 Cards)

1. Drag "VN Hero Cards" to your page

2. Add 3 cards for main services:

   Card 1:

   • Background Image: Upload a marketing-related photo
   • Title: "Award-Winning, Social-First Marketing Agency"
   • Subtitle: "Marketing"
   • Content: Brief description of marketing services
   • Button Text: "Explore Marketing"
   • Button Link: Marketing services page

   Card 2:

   • Background Image: Upload talent-related photo
   • Title: "Connect with Top Creators"
   • Subtitle: "Talent"
   • Content: Brief description of talent services
   • Button Text: "Meet Our Talent"
   • Button Link: Talent page

   Card 3:

   • Background Image: Upload technology-related photo
   • Title: "Data-Driven Solutions"
   • Subtitle: "Technology"
   • Content: Brief description of tech services
   • Button Text: "See Our Tech"
   • Button Link: Technology page

Example 2: Single Hero Card

1. Drag "VN Hero Cards" to your page
2. Delete extra cards, keeping just 1
3. Upload a striking background image
4. Set Title to your main headline
5. Set Subtitle to a supporting category or tagline
6. Add compelling content text
7. Set Button Text to your primary call-to-action
8. This creates a full-width hero banner

Example 3: Portfolio Preview (4 Cards)

1. Drag "VN Hero Cards" to your page
2. Create 4 cards for featured projects:
3. For each card:
   • Use project imagery as Background Image
   • Set Title to project/client name
   • Set Subtitle to project category
   • Add a brief project description
   • Set Button Text to "View Case Study"
   • Link to the full case study page

Tips

• Choose high-quality, visually striking background images - they're the main visual element
• Keep Title text concise but impactful - it's the first thing visitors read
• Use Subtitle for categorization (like "Marketing", "Technology", "Case Study")
• Content should be brief - 1-2 sentences that entice visitors to click
• Button text should be action-oriented: "Learn More", "Get Started", "View Project"
• For accessibility, add ARIA labels when button text alone doesn't fully describe the action
• Use consistent image sizes and aspect ratios across all cards for a polished look
• The module works well with 1-4 cards; 3 cards is ideal for a balanced layout
• Images should have good contrast with the text overlay for readability