Developer Docs

Quick reference guides with props tables, usage examples, and best practices for rapid development

Components

Form Components

Display Components

Feedback Components

Layout Components

Navigation Components

Components/Docs/Card

Card

Flexible container component with filterClassName for infinite customization

✨ Quick Examples

Interactive examples demonstrating Card usage:

Basic Card

Card Title

Card content goes here. Simple and clean.

Card(
  { class: 'p-6' },
  h3('Card Title'),
  p('Card content goes here...')
)

Glass Morphism Card

Glass Card

Semi-transparent with backdrop blur effect

Card(
  {
    class: 'bg-white/95 backdrop-blur-xl shadow-glass p-8'
  },
  h3({ class: 'text-xl font-semibold' }, 'Glass Card'),
  p('Semi-transparent with backdrop blur')
)

Interactive Card

const clickCount = van.state(0);

Card(
  {
    class: 'p-6 cursor-pointer hover:shadow-lg transition-shadow',
    onclick: () => clickCount.val++
  },
  h3('Interactive Card'),
  p(() => `Clicked ${clickCount.val} times`)
)

📋 Props

Card component accepts the following props:

Prop	Type	Default	Description
class	string	''	Additional CSS classes
id	string	undefined	HTML id attribute
onclick	Function	undefined	Click handler for interactive cards
...htmlProps	object	{}	Any HTML div attributes (aria-, data-, etc.)
children	any	[]	Child elements to render inside the card

⭐ Key Features

Card provides essential layout capabilities:

★

Flexible Styling

Accept any Tailwind classes for complete customization

★

Composable

Nest cards, buttons, badges, and other components seamlessly

★

Glass Morphism

Built-in support for frosted glass effects with backdrop blur

★

Interactive

Add click handlers for interactive cards with hover states

🎨 Card Variants

Common card styling patterns:

Minimal

Clean card with default styling

Bordered

Card with colored border

Shadow

Card with elevated shadow

Dark Mode

Dark background variant

Colored

Subtle gradient background

📐 Card with Sections

Cards can be structured with header, body, and footer sections:

Card Header

This is the main content area of the card. You can put any content here.

Cards are perfect for grouping related information.

Card(
  { class: 'p-0' },
  div({ class: 'bg-sky text-white p-4' },
    h3('Card Header')
  ),
  div({ class: 'p-6' },
    p('Card body content')
  ),
  div({ class: 'bg-cloud p-4 border-t border-mist' },
    Button('Action')
  )
)

📚 Common Patterns

Real-world card layout examples:

Profile Card

Jane Doe

Product Designer

Passionate about creating beautiful, user-friendly experiences.

DesignUXResearch

Stats Card

2.4k

Followers

186

Following

Posts

✅ Best Practices

Guidelines for effective Card usage:

✓ Do This

✓Use for grouping related content

✓Maintain consistent padding (p-6 or p-8)

✓Add hover effects for clickable cards

✓Use glass effect on colorful backgrounds

✓Compose with Avatars, Badges, Buttons

✗ Avoid This

✗Nest cards more than 2 levels deep

✗Mix inconsistent padding values

✗Forget hover states on interactive cards

✗Use glass effect on plain white backgrounds

✗Overcrowd cards with too much content

Explore More Components

Browse other component categories