Card

Feature card component with an icon, title, description, and entrance animations. Ideal for showcasing features, services, or benefits in grid layouts with animation support.

Use Cases

• Feature showcases (3‑column grid of product features)
• Service offerings (what the company provides)
• Benefits or value propositions
• Step‑by‑step process explanations
• Icon + text content blocks

Properties

title

Card title – should be concise (1‑3 words). Type: string. Required.

description

Card description – explains the feature (1‑2 sentences). Type: string. Required.

icon

Lucide icon name to display at top of card. Accepts all 300+ Lucide icons. Type: string. Options: Feather, Star, Shield, Heart, Zap, Users, Check, Mail, Phone, Clock, Globe, Lock, Rocket, TrendingUp. Default: Feather. Recommendation: speed – use ‘Zap’ or ‘Rocket’; security – use ‘Shield’ or ‘Lock’; quality – use ‘Star’ or ‘Check’; people – use ‘Users’ or ‘Heart’; communication – use ‘Mail’ or ‘Phone’; growth – use ‘TrendingUp’.

mode

Visual style – controls background, shadow, and border treatment. Type: string. Options: flat, card, elevated, bordered, glass, gradient. Default: flat. Visual impact: flat – no background or shadow; card – subtle shadow, white background, border; elevated – strong shadow (--theme-shadow-lg); bordered – outline border only, transparent background; glass – frosted blur effect; gradient – themed gradient background. Recommendations: features – use ‘elevated’; inline – use ‘flat’; overImages – use ‘glass’; cta – use ‘gradient’; minimal – use ‘bordered’; standard – use ‘card’.

hoverEffect

Interactive hover effect for cards. Type: string. Options: none, lift, glow, scale. Default: none. Visual impact: none – no hover animation; lift – card moves up 8px with enhanced shadow; glow – shadow glow using primary color; scale – card grows 3% on hover. Recommendations: clickable – use ‘lift’; interactive – use ‘glow’; playful – use ‘scale’; static – use ‘none’.

entrance

Entrance animation when card first appears. Use with entranceDelay for staggered effects. Type: string. Options: none, fadeUp, fadeIn, scale, slideLeft, slideRight. Default: none. Visual impact: none – appears instantly; fadeUp – fades in while sliding up 24px; fadeIn – subtle fade in only; scale – fades in while scaling from 90%; slideLeft – slides in from the left; slideRight – slides in from the right. Recommendations: cardGrids – use ‘fadeUp’; subtle – use ‘fadeIn’; featured – use ‘scale’; sideBySide – use ‘slideLeft’/‘slideRight’.

entranceDelay

Delay in seconds before entrance animation plays. Use incremental values (0, 0.1, 0.2) for staggered reveals in card grids. Type: number. Default: 0.

entranceOnScroll

When true, entrance animation triggers when card scrolls into view (IntersectionObserver). When false, animates on page load. Type: boolean. Default: false.

imageUrl

Optional image URL for cards with visual content. Works with imagePosition. Type: string.

imagePosition

Image display position when imageUrl is provided. Type: string. Options: top, background. Default: top. Visual impact: top – image at top of card with content below; background – image as card background with gradient overlay.

buttons

Optional action buttons displayed at the bottom of the card. Use for CTAs like “Learn More”, “Buy Now”, etc. Type: array.

Each button object includes:

• label (string, required) – Button text.
• href (string, optional) – External URL for the button.
• targetPage (string, optional) – Target page slug for internal navigation.
• variant (string, optional) – Button visual style. Options: primary, secondary. Default: primary.

customCss

Custom CSS styles for advanced styling. Parsed as CSS property‑value pairs. Type: string. Security note: Parsed by cssParser utility; tenants only affect their own pages (multi‑tenant isolation enforced).

Best Practices

• ALWAYS place Card components in Grid with numColumns: 3 for professional feature grids
• For card grids, use entrance='fadeUp' with staggered entranceDelay (0s, 0.1s, 0.2s) OR wrap Grid in ScrollReveal with stagger=true
• Prefer wrapping Grid in ScrollReveal with stagger=true (simpler than manual delays on each card)
• Use mode: 'card' or 'elevated' for prominent, shadowed cards
• Use mode: 'flat' for subtle, inline feature lists
• Choose meaningful icons that represent the feature (Zap for speed, Shield for security, Star for quality)
• Keep title concise (1‑3 words) and description to 1‑2 sentences

Common Mistakes

Not placing Cards in Grid layout

Why it's a problem: Stacked cards at full width waste space and look unprofessional – cards designed for grid layouts

Fix: Always place Card components in Grid with numColumns: 3 (or 2 for fewer cards)

Setting entrance animations on each card instead of using ScrollReveal stagger

Why it's a problem: Verbose and error‑prone – have to manually set entranceDelay on each card

Fix: Wrap the Grid in ScrollReveal with stagger=true instead – much simpler

Using generic or mismatched icons

Why it's a problem: Icon doesn’t represent the feature – confuses users about what the feature does

Fix: Choose meaningful icons: Zap for speed, Shield for security, Star for quality, Users for community

Writing long descriptions (3+ sentences)

Why it's a problem: Card becomes too tall, grid layout looks unbalanced, users skip long text

Fix: Keep description to 1‑2 concise sentences that explain the benefit