Card Component

Flexible card component with multiple variants. Uses 16px border radius (rounded-2xl), 20px padding, and subtle translucent borders for a smooth, light appearance.

Variants

Five card variants optimized for light mode: default, elevated, interactive, outline, and mist. Each uses 16px border radius, 20px padding, and translucent borders (border-slate-200/80).

Default Card

Clean and minimal

Perfect for standard content with subtle shadow and border. The go-to variant for most use cases.

Elevated Card

Enhanced depth

Adds prominence with shadow-sm, perfect for featured content or important information.

Interactive Card

Clickable with hover

Responds to user interaction with indigo border and shadow on hover.

Outline Card

Transparent bg

Minimal variant with border only, no background fill or shadow.

Mist Card

Frosted glass effect

Semi-transparent background with backdrop blur for a premium frosted glass appearance.

Examples

Real-world card implementations following Eidetic design patterns.

+340K/mo
2.1M
NPM Downloads
AI Powered

AI Image Generator

Stable Diffusion XL

New

Generate stunning images from text descriptions using AI.

E

Eidetic Design

San Francisco, CA
Senior Frontend Developer
$180k - $220k salary
Remote-first culture
Equity + full benefits

Analytics Dashboard

v2.4.1
Pro

Real-time metrics with AI-powered insights and predictive analytics.

Real-time updates
AI-powered predictions
Enterprise security
+2.4k users

Visual Feature Cards

Beautiful 3D-style feature cards with gradient backgrounds and glassmorphic effects.View all 16 cards

Smart Suggestions

Get intelligent recommendations based on your usage patterns and preferences.

Enterprise Security

Bank-grade encryption and security protocols to protect your sensitive data.

Smart Scheduling

AI-powered calendar that finds the perfect meeting times automatically.

Performance Analytics

Real-time insights and analytics to optimize your application performance.

Live

Real-Time Monitoring

Live dashboards with instant alerts for critical metrics and events.

50+metrics tracked

Stacked Patterns

Modern layout patterns for grouping related cards.

Vertical Stack

Fanned Stack

Scale Stack

Messy Stack

Animated StackAuto-Play

Design Tokens

Consistent spacing, typography, and visual hierarchy from the Eidetic design system.

Spacing

Internal padding & gaps

Card padding (md)20px
Header gap6px
Footer gap12px
Border opacity80%

Border Radius

Rounded corners scale

Cards/Panels16px
Containers12px
Buttons8px
Badges6px

Typography

Text hierarchy

Title16px base
Description12-14px
Title weight600 semibold
Shadowvery subtle