Card

Feature card component with an icon, title, description, and entrance animations. Ideal for showcasing features, services, or benefits in grid layouts with world‑class 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.

description

Card description - explains the feature (1-2 sentences) Type: string.

icon

Lucide icon name to display at top of card. Accepts all 300+ Lucide icons, but AI should use recommended icons from enum for clarity. Type: string. Options: Feather, Star, Shield, Heart, Zap, Users, Check, Mail, Phone, Clock, Globe, Lock, Rocket, TrendingUp. Default: Feather. Recommendations: speed – Use 'Zap' or 'Rocket' for speed/performance features; security – Use 'Shield' or 'Lock' for security features; quality – Use 'Star' or 'Check' for quality/excellence; people – Use 'Users' or 'Heart' for community/customer features; communication – Use 'Mail' or 'Phone' for contact/support; growth – Use 'TrendingUp' for growth/analytics features.

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 - subtle inline style for minimal layouts; card – Subtle shadow, white background, border - standard elevated card appearance; elevated – Strong shadow (--theme-shadow-lg) - prominent, floating appearance for important content; bordered – Outline border only, transparent background - clean, minimal but defined; glass – Frosted blur effect (backdrop-filter: blur) - modern, works great over images/gradients; gradient – Themed gradient background (--theme-gradient-start to --theme-gradient-end) - eye‑catching for CTAs. Recommendations: features – Use 'elevated' for prominent feature showcases in 3‑column grid; inline – Use 'flat' for subtle inline feature lists; overImages – Use 'glass' when cards appear over background images or gradients; cta – Use 'gradient' for call‑to‑action or promotional cards; minimal – Use 'bordered' for clean, modern minimal design; standard – Use 'card' for standard elevated cards with subtle depth.

hoverEffect

Interactive hover effect for cards Type: string. Options: none, lift, glow, scale. Default: none. Visual Impact: none – No hover animation - static appearance; lift – Card moves up 8px with enhanced shadow on hover - classic interactive feel; glow – Shadow glow using primary color on hover - modern, attention‑grabbing; scale – Card grows 3% on hover - playful, interactive. Recommendations: clickable – Use 'lift' for cards that are clickable/actionable; interactive – Use 'glow' for SaaS/tech products for modern feel; playful – Use 'scale' for playful/kids themes; static – Use 'none' for non‑interactive informational cards.

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 – No entrance animation - appears instantly; fadeUp – Fades in while sliding up 24px - most common for card grids; fadeIn – Subtle fade in only - elegant, minimal; scale – Fades in while scaling from 90% - attention‑grabbing; slideLeft – Slides in from the left - good for side‑by‑side layouts; slideRight – Slides in from the right - good for side‑by‑side layouts. Recommendations: cardGrids – Use 'fadeUp' for most card grids; subtle – Use 'fadeIn' for elegant, minimal reveals; featured – Use 'scale' for featured/highlighted cards; sideBySide – Use 'slideLeft'/'slideRight' for horizontal layouts.

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 - classic card layout; background – Image as card background with gradient overlay - content overlays image.

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