VN Featured Card

What It Does

Creates a standalone content card featuring an icon heading label, body text, and a call-to-action button, with customizable background options.

When to Use It

• Highlighting a single service or feature
• Creating a promotional callout
• Building standalone content blocks with visual impact
• Adding a featured item that needs to stand out

How to Add This Module

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

Show/Hide Elements

Setting	What It Does	Options
Show Icon Heading	Display the label heading at the top	On/Off
Show Main Heading	Display a main heading	On/Off
Show Body Content	Display the body text	On/Off
Show Toggles	Display expandable sections	On/Off
Show Button	Display the call-to-action button	On/Off

Icon Heading (when enabled)

Setting	What It Does	Options
Heading Text	The label text	Any text
Heading Level	HTML element type	p, h1, h2, h3, h4, h5, h6
Icon	Icon displayed next to text	Icon picker

Main Heading (when enabled)

Setting	What It Does	Options
Heading Text	The main card title	Any text
Heading Level	HTML heading level	h1, h2, h3, h4, h5, h6
Uppercase	Display in all caps	On/Off
Color	Heading text color	Black, White

Body Content (when enabled)

Setting	What It Does	Options
Content	Rich text for the card body	Formatted text
Text Color	Body text color	Black, White
Text Size	Body text size	Small, Medium, Large

Call-to-Action Button (when enabled)

Setting	What It Does	Options
Button Text	Text on the button	Any text
Button Link	Where the button goes	URL, page, or file
Button Style	Visual style	Gradient Fill - Black Text, Gradient, Primary, Secondary, etc.
Button Size	Size of button	Small, Medium, Large

Card Background

Setting	What It Does	Options
Background Type	Choose background style	Preset Background, Custom Image
Background Preset	Predefined color option	White, Black, Gray, Gray Gradient, Transparent
Background Image	Custom image background	Image picker (when Custom Image selected)

Stack Gap

Setting	What It Does	Options
Stack Gap	Space between elements in the card	None, Extra Small, Small, Medium, Large, Extra Large

Advanced Customization

Setting	What It Does	Options
CSS Class Selector	Add custom CSS classes	Class name(s)
CSS ID Selector	Add a unique ID	ID name

Example Setups

Example 1: Service Feature Card

1. Drag "VN Featured Card" to your page
2. Turn ON: Icon Heading, Body Content, Button
3. Turn OFF: Main Heading, Toggles
4. Set Icon Heading text to "Marketing Services"
5. Add body content describing the service
6. Set Button Text to "Learn More"
7. Set Background Preset to "White"
8. Set Button Style to "Gradient Fill - Black Text"

Example 2: Dark Promotional Card

1. Drag "VN Featured Card" to your page
2. Turn ON: Icon Heading, Main Heading, Body Content, Button
3. Set Background Preset to "Black"
4. Set Heading Color to "White"
5. Set Text Color to "White"
6. Set Button Style to "Gradient" or "Ghost (On Black)"
7. Add your promotional content

Example 3: Image Background Card

1. Drag "VN Featured Card" to your page
2. Set Background Type to "Custom Image"
3. Upload a background image
4. Turn ON: Icon Heading, Body Content, Button
5. Set Text Color to "White" for visibility over the image
6. Set Button Style to "White" or "Ghost (On Black)"

Tips

• The "Icon Heading" works well as a category label (like "Featured" or service names)
• Use "Gradient Fill - Black Text" button style on light backgrounds for high visibility
• On dark backgrounds, use "White" or "Ghost (On Black)" button styles
• Keep body content concise - featured cards work best with brief, impactful text
• Use "Small" for Stack Gap to create a compact card appearance
• The "Transparent" background preset is useful when placing the card over colored sections
• Match your text colors to the background: White text on dark backgrounds, Black text on light backgrounds