Card Component

The Card component provides a flexible container for displaying content with multiple visual variants, sizes, and advanced customization options. It's perfect for content organization, feature showcases, and user interface elements with extensive prop support for fine-tuned control.

Title: Simple Card Implementation Description: Create a basic card with default styling and content.

import { Card } from '@/components/card'

export default function BasicCardExample() {
  return (
    <Card 
      cardTitle="Welcome Card"
      cardDescription="A simple welcome message"
      cardContent="This is a basic card example showing default styling and layout."
    />
  )
}

Preview:

Title: Complete Props Documentation Description: Comprehensive list of all available props with types, defaults, and descriptions.

Title: Card Visual Variants Description: Explore different visual styles to match your design system. Each variant provides unique aesthetics while maintaining consistent structure.

Title: Standard Card Design Description: Clean white background with subtle borders for professional applications.

<Card 
  variant="default"
  cardTitle="Default Style"
  cardDescription="Professional and clean design"
  cardContent="Perfect for business applications and formal content."
/>

Preview:

Title: Enhanced Border Styling Description: Prominent borders for clear visual separation and emphasis.

<Card 
  variant="bordered"
  cardTitle="Bordered Style"
  cardDescription="Enhanced visual separation"
  cardContent="Great for highlighting important information and creating clear boundaries."
/>

Preview:

Title: Background Fill Design Description: Light background fill for subtle visual distinction.

<Card 
  variant="filled"
  cardTitle="Filled Style"
  cardDescription="Subtle background emphasis"
  cardContent="Ideal for content that needs gentle visual separation from the background."
/>

Preview:

Title: Accent Border Design Description: Colored borders for highlighting important content.

<Card 
  variant="outlined"
  cardTitle="Outlined Style"
  cardDescription="Accent-colored borders"
  cardContent="Perfect for drawing attention to featured content and important information."
/>

Preview:

Title: Minimal Transparent Design Description: Transparent background for subtle integration.

<Card 
  variant="ghost"
  cardTitle="Ghost Style"
  cardDescription="Minimal and transparent"
  cardContent="Excellent for subtle content integration without visual interference."
/>

Preview:

Title: Beautiful Gradient Background Description: Premium gradient backgrounds for featured content.

<Card 
  variant="gradient"
  cardTitle="Gradient Style"
  cardDescription="Premium gradient background"
  cardContent="Stunning visual appeal perfect for premium features and hero content."
/>

Preview:

Title: Cyberpunk Neon Design Description: Dark background with cyan glow effects for futuristic aesthetics.

<Card 
  variant="neon"
  cardTitle="Neon Style"
  cardDescription="Cyberpunk-inspired design"
  cardContent="Futuristic appearance with dark background and cyan glow effects."
/>

Preview:

Title: Modern Glassmorphism Description: Transparency and backdrop blur for contemporary design.

<Card 
  variant="glass"
  cardTitle="Glass Style"
  cardDescription="Modern glassmorphism"
  cardContent="Contemporary design with transparency and backdrop blur effects."
/>

Preview:

Title: Card Size Variations Description: Four different sizes to accommodate various content lengths and design requirements.

Title: Compact Card Design Description: Ideal for brief content and tight layouts.

<Card 
  size="sm"
  cardTitle="Small Card"
  cardDescription="Compact design"
  cardContent="Perfect for brief information and tight space constraints."
/>

Preview:

Title: Standard Card Design Description: Perfect for most content and general use cases.

<Card 
  size="md"
  cardTitle="Medium Card"
  cardDescription="Standard sizing"
  cardContent="The default size that works well for most content and applications."
/>

Preview:

Title: Spacious Card Design Description: For detailed content and prominent displays.

<Card 
  size="lg"
  cardTitle="Large Card"
  cardDescription="Spacious design"
  cardContent="Ample space for detailed content, longer descriptions, and comprehensive information."
/>

Preview:

Title: Maximum Card Design Description: For comprehensive content and hero sections.

<Card 
  size="xl"
  cardTitle="Extra Large Card"
  cardDescription="Maximum sizing"
  cardContent="Maximum space for hero content, comprehensive layouts, and prominent displays."
/>

Preview:

Title: Advanced Styling Options Description: Precise control over card appearance with border radius, width, and custom styling.

Title: Corner Rounding Control Description: Customize the corner rounding for different visual styles.

// Full rounded corners
<Card rounded="full" cardTitle="Fully Rounded" />

// No rounded corners
<Card rounded="none" cardTitle="Sharp Corners" />

// Extra large rounded corners
<Card rounded="xl" cardTitle="Extra Rounded" />

Preview - Full Rounded:

Preview - No Rounded:

Title: Border Thickness Options Description: Adjust border thickness for different emphasis levels.

// Thick border for emphasis
<Card borderWidth="4" cardTitle="Thick Border" />

// No border for minimal design
<Card borderWidth="0" cardTitle="No Border" />

// Extra thick border for maximum emphasis
<Card borderWidth="8" cardTitle="Extra Thick" />

Preview - Thick Border:

Preview - No Border:

Title: Dynamic Animation Options Description: Add engaging animations to enhance user experience and visual appeal.

Title: Smooth Fade Transitions Description: Elegant fade-in effect for smooth transitions.

<Card 
  animation="fade"
  cardTitle="Fade Effect"
  cardDescription="Smooth transitions"
  cardContent="Elegant fade-in animation for professional presentations."
/>

Preview:

Title: Engaging Slide Effects Description: Slide-in effect for dynamic content reveals.

<Card 
  animation="slide"
  cardTitle="Slide Effect"
  cardDescription="Dynamic content reveal"
  cardContent="Engaging slide-in animation for interactive content."
/>

Preview:

Title: Playful Bounce Effects Description: Fun bounce effect for interactive elements.

<Card 
  animation="bounce"
  cardTitle="Bounce Effect"
  cardDescription="Playful interactions"
  cardContent="Fun and engaging bounce animation for interactive elements."
/>

Preview:

Title: Attention-Grabbing Pulse Description: Subtle pulsing for important content.

<Card 
  animation="pulse"
  cardTitle="Pulse Effect"
  cardDescription="Attention-grabbing"
  cardContent="Subtle pulsing animation to draw attention to important content."
/>

Preview:

Title: Flexible Layout Options Description: Control card width, positioning, and layout behavior for different design requirements.

Title: Expandable Card Layout Description: Expand cards to fill available horizontal space.

<Card 
  fullWidth={true}
  cardTitle="Full Width Card"
  cardDescription="Expanded layout"
  cardContent="This card expands to fill the full available width of its container."
/>

Preview:

Title: Width Control Options Description: Control card width with predefined size constraints.

// Large maximum width
<Card maxWidth="2xl" cardTitle="Large Max Width" />

// Medium maximum width
<Card maxWidth="lg" cardTitle="Medium Max Width" />

// Small maximum width
<Card maxWidth="sm" cardTitle="Small Max Width" />

Preview - Large Max Width:

Preview - Small Max Width:

Title: Extensive Color Options Description: Personalize card designs with custom text and background colors for brand consistency.

Title: Personalized Text Styling Description: Override default text colors for brand consistency.

// Blue text for brand consistency
<Card textColor="blue" cardTitle="Blue Text" />

// Green text for success themes
<Card textColor="green" cardTitle="Green Text" />

// Purple text for creative designs
<Card textColor="purple" cardTitle="Purple Text" />

Preview - Blue Text:

Preview - Green Text:

Title: Personalized Background Styling Description: Set custom background colors for unique designs.

// Blue background for brand themes
<Card backgroundColor="blue" cardTitle="Blue Background" />

// Green background for nature themes
<Card backgroundColor="green" cardTitle="Green Background" />

// Transparent background for overlay effects
<Card backgroundColor="transparent" cardTitle="Transparent Background" />

Preview - Blue Background:

Preview - Transparent Background:

Title: Precise Spacing Options Description: Consistent layouts with customizable padding and margin options.

Title: Internal Spacing Control Description: Adjust internal spacing for different content densities.

// No padding for compact design
<Card padding="none" cardTitle="No Padding" />

// Extra large padding for spacious design
<Card padding="xl" cardTitle="Extra Large Padding" />

// Maximum padding for maximum spacing
<Card padding="2xl" cardTitle="Maximum Padding" />

Preview - No Padding:

Preview - Extra Large Padding:

Title: External Spacing Control Description: Control external spacing for layout positioning.

// Large margin for spacing
<Card margin="lg" cardTitle="Large Margin" />

// Extra large margin for separation
<Card margin="xl" cardTitle="Extra Large Margin" />

// Maximum margin for maximum separation
<Card margin="2xl" cardTitle="Maximum Margin" />

Preview - Large Margin:

Title: Enhanced User Experience Description: Transform cards into interactive elements with clickable states, loading indicators, and disabled modes.

Title: Interactive Card Elements Description: Transform cards into clickable interactive elements.

<Card 
  clickable={true}
  cardTitle="Clickable Card"
  cardDescription="Interactive element"
  cardContent="This card can be clicked to trigger actions or navigation."
/>

Preview:

Title: Dynamic Loading Indicators Description: Show loading indicators for dynamic content.

<Card 
  loading={true}
  cardTitle="Loading Card"
  cardDescription="Dynamic content loading"
  cardContent="This card shows a loading state while content is being fetched."
/>

Preview:

Title: Inactive Card Mode Description: Disable interactions for inactive content.

<Card 
  disabled={true}
  cardTitle="Disabled Card"
  cardDescription="Inactive state"
  cardContent="This card is disabled and cannot be interacted with."
/>

Preview:

Title: Rich Content Options Description: Enhance cards with images, badges, and custom content for comprehensive designs.

Title: Visual Content Support Description: Add visual content with image support and alt text.

<Card 
  image="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=200&fit=crop"
  imageAlt="Featured product image"
  cardTitle="Product Card"
  cardDescription="With featured image"
  cardContent="This card includes a featured image for visual appeal."
/>

Preview:

Card Title

Card description

Card content goes here.

Card actions would go here

Title: Information Highlighting Description: Highlight important information with color-coded badges.

// Green badge for new items
<Card badge="New" badgeColor="green" cardTitle="New Product" />

// Purple badge for featured items
<Card badge="Featured" badgeColor="purple" cardTitle="Featured Item" />

// Red badge for limited items
<Card badge="Limited" badgeColor="red" cardTitle="Limited Edition" />

Preview - Green Badge:

Preview - Purple Badge:

Preview - Red Badge:

Title: Professional-Grade Capabilities Description: Enterprise-level features for professional applications including theme support, elevation control, and responsive behavior.

Title: Automatic Theme Switching Description: Support for different themes and environments.

// Dark theme for dark environments
<Card theme="dark" cardTitle="Dark Theme" />

// Automatic theme detection
<Card theme="auto" cardTitle="Auto Theme" />

Preview - Dark Theme:

Title: Shadow Depth Management Description: Fine-tune shadow depth for material design principles.

// No elevation for flat design
<Card elevation="0" cardTitle="No Elevation" />

// Medium elevation for standard depth
<Card elevation="3" cardTitle="Medium Elevation" />

// High elevation for prominent display
<Card elevation="5" cardTitle="High Elevation" />

Preview - No Elevation:

Preview - High Elevation:

Title: Mobile Optimization Description: Optimize for different screen sizes and devices.

<Card 
  responsive={true}
  mobileOptimized={true}
  cardTitle="Responsive Card"
  cardDescription="Mobile optimized"
  cardContent="This card automatically adapts to different screen sizes and mobile devices."
/>

Preview:

Title: Enhanced User Experience Description: Improve user interaction with hover effects, shadow control, and visual feedback.

Title: Smooth Hover Animations Description: Enable smooth hover animations for interactive cards.

<Card 
  hover={true}
  cardTitle="Hover Effect Card"
  cardDescription="Interactive feedback"
  cardContent="This card provides smooth hover animations for better user experience."
/>

Preview:

Title: Customizable Shadow Display Description: Customize shadow display for different visual effects.

<Card 
  shadow={false}
  cardTitle="No Shadow Card"
  cardDescription="Clean appearance"
  cardContent="This card has no shadow for a clean, minimal appearance."
/>

Preview:

Title: Flexible Content Options Description: Create exactly the card layout you need with customizable headers, footers, and content.

Title: Personalized Header Content Description: Personalize card headers with custom text content.

<Card 
  cardTitle="Custom Title Here"
  cardDescription="This is a custom description for the card"
  cardContent="The header content has been completely customized for this specific use case."
/>

Preview:

Title: Header Display Options Description: Hide headers when you need a cleaner, content-focused design.

<Card 
  showHeader={false}
  cardContent="This card has no header for a clean, content-only appearance."
/>

Preview:

Title: Footer Display Options Description: Remove footers for content-only card layouts.

<Card 
  showFooter={false}
  cardTitle="No Footer Card"
  cardDescription="Content-focused design"
  cardContent="This card has no footer for a content-focused layout."
/>

Preview:

Title: Personalized Footer Text Description: Add meaningful footer text for actions or additional information.

<Card 
  footerContent="Custom footer text with specific information and actions"
  cardTitle="Custom Footer Card"
  cardDescription="Personalized footer content"
  cardContent="This card demonstrates custom footer content for specific use cases."
/>

Preview:

Title: Real-World Implementation Description: Practical examples demonstrating effective card usage in various scenarios.

Title: Feature Showcase Design Description: Showcase premium features with gradient styling and hover effects.

<Card 
  variant="gradient"
  size="lg"
  cardTitle="Premium Feature"
  cardDescription="Unlock advanced capabilities"
  cardContent="Get access to premium features including advanced analytics, custom themes, and priority support."
  hover={true}
  badge="Premium"
  badgeColor="yellow"
/>

Preview:

Title: Futuristic Design Example Description: Create futuristic designs with the neon variant.

<Card 
  variant="neon"
  cardTitle="Cyberpunk Style"
  cardDescription="Futuristic design aesthetic"
  cardContent="This card features a neon cyan glow effect with a dark background for cyberpunk aesthetics."
  animation="pulse"
  badge="Cyber"
  badgeColor="cyan"
/>

Preview:

Title: Modern Design Pattern Description: Implement modern glassmorphism design patterns.

<Card 
  variant="glass"
  cardTitle="Glass Morphism"
  cardDescription="Modern transparent design"
  cardContent="This card uses glassmorphism with backdrop blur and transparency effects for contemporary aesthetics."
  rounded="xl"
  elevation="3"
/>

Preview:

Title: Clean Minimal Aesthetics Description: Create clean, minimal designs for subtle content integration.

<Card 
  variant="ghost"
  size="sm"
  cardTitle="Minimal Design"
  cardDescription="Clean and simple aesthetics"
  cardContent="A minimal card with no borders or background for subtle content integration."
  shadow={false}
  rounded="none"
/>

Preview:

Title: Comprehensive Feature Showcase Description: Demonstrate the power of combining multiple props for unique designs.

<Card 
  variant="neon"
  size="xl"
  rounded="full"
  borderWidth="2"
  animation="pulse"
  fullWidth={true}
  textColor="cyan"
  backgroundColor="black"
  padding="2xl"
  clickable={true}
  badge="Featured"
  badgeColor="pink"
  elevation="5"
  cardTitle="Advanced Card"
  cardDescription="Showcasing all customization options"
  cardContent="This card demonstrates the extensive customization capabilities with neon effects, full width, custom colors, and interactive features."
/>

Preview:

Title: Implementation Guidelines Description: Follow these guidelines to create effective and accessible card designs.

Description: Use variants that match your design system and provide good contrast for accessibility.

Description: Use sm for compact spaces, md for standard content, and lg/xl for prominent displays.

Description: Enable hover effects for interactive cards to provide visual feedback and improve user experience.

Description: Use clear titles and descriptions to guide users through your content effectively.

Description: Maintain sufficient contrast between text and background colors, especially with neon and glass variants.

Description: Apply animations purposefully to enhance user experience without being distracting.

Description: Enable mobile optimization for responsive designs that work across all devices.

Description: Use the color customization options to maintain brand consistency and improve readability.

Title: Inclusive Design Support Description: The Card component is designed with accessibility in mind, providing a solid foundation for inclusive design.

Description: All variants are designed for good contrast ratios to ensure readability.

Description: Proper heading structure with h3 for titles maintains document outline and screen reader compatibility.

Description: Clear visual indicators for interactive elements help users navigate effectively.

Description: Adapts to different screen sizes and content lengths for consistent user experience across devices.

Description: Automatic theme switching helps users with different visual preferences and accessibility needs.

Description: Configurable animations allow users to disable motion if needed for accessibility.

Title: Versatile Application Scenarios Description: The Card component is versatile and can be used in various scenarios:

• Content Organization: Group related information in structured layouts
• Feature Showcases: Highlight product features or capabilities
• User Interface Elements: Create consistent design patterns
• Dashboard Components: Organize data and metrics
• Product Displays: Showcase products with descriptions and actions
• Information Cards: Present facts, statistics, or details
• Interactive Elements: Create engaging user experiences
• Marketing Materials: Design promotional content with custom styling
• Portfolio Items: Display work samples with rich content
• Notification Cards: Show alerts and updates with appropriate styling
• Form Containers: Wrap form elements in styled containers
• Media Galleries: Present images and videos with descriptions