Card

The Card component is a versatile container component used to group related content and information. It provides a structured layout with optional header, body, and footer sections, and supports various styling options and use cases.

Overview

The Card component is designed to provide flexible content containers with:

Optional header, body, and footer sections
Multiple styling variants and layouts
Image support with overlays
Horizontal and vertical layouts
Quote and testimonial styles
Dashboard and statistics layouts
Responsive design with dark mode support

Basic Usage

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

function MyComponent() {
  return (
    <Card>
      <Card.Header>Card Title</Card.Header>
      <Card.Body>Card content goes here</Card.Body>
      <Card.Footer>Card footer</Card.Footer>
    </Card>
  )
}

Props

Card Props

Prop	Type	Default	Description
`children`	`ReactNode`	-	The content to display in the card
`className`	`string`	`''`	Additional CSS classes

CardHeader Props

Prop	Type	Default	Description
`children`	`ReactNode`	-	The content to display in the header
`className`	`string`	`''`	Additional CSS classes

CardBody Props

Prop	Type	Default	Description
`children`	`ReactNode`	-	The content to display in the body
`className`	`string`	`''`	Additional CSS classes

CardFooter Props

Prop	Type	Default	Description
`children`	`ReactNode`	-	The content to display in the footer
`className`	`string`	`''`	Additional CSS classes

Basic Card Structure

Simple Card

<Card>
  Basic card content
</Card>

Card with Header, Body, and Footer

<Card className='card-default'>
  <Card.Header>Card Heading</Card.Header>
  <Card.Body>They all have something to say beyond the words on the page. They can come across as casual or neutral, exotic or graphic.</Card.Body>
  <Card.Footer>Card Footer</Card.Footer>
</Card>

Card Variants

Default Card

Standard card with padding and border.

<Card>
  <div className='p-4'>
    <h4>Card Title</h4>
    <p>Card content</p>
  </div>
</Card>

Card Default (No Padding)

Remove default padding for custom layouts.

<Card className='card-default'>
  <div className='p-4'>
    <h4>Custom Layout</h4>
    <p>Content with custom padding</p>
  </div>
</Card>

Sales Card

Card designed for promotional content.

<Card className='flex flex-col items-start p-6'>
  <div className='font-bold text-lg mb-2'>Upgrade to Pro</div>
  <div className='text-gray-600 mb-4'>Unlock premium features and boost your productivity with our Pro plan.</div>
  <Button label='Learn More' className='btn-primary mt-auto' />
</Card>

Image Cards

Card with Image and Overlay

<div className='max-w-sm relative rounded-xl overflow-hidden shadow-lg group bg-white dark:bg-gray-900'>
  <img
    src='https://images.pexels.com/photos/3975585/pexels-photo-3975585.jpeg'
    alt='Minimal Workspace'
    className='w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105'
  />
  <div className='absolute inset-0 bg-black/40 dark:bg-black/60 flex items-start p-4'>
    <div className='text-white max-w-xs'>
      <h3 className='text-lg font-semibold mb-1 !text-white'>Minimal Workspace</h3>
      <p className='text-sm text-gray-200 !text-white'>Designed for clarity, focus, and productivity.</p>
    </div>
  </div>
</div>

Card with Image and Bottom Overlay

<div className='max-w-sm relative rounded-xl overflow-hidden shadow-lg group bg-white dark:bg-gray-900'>
  <img
    src='https://images.pexels.com/photos/2566573/pexels-photo-2566573.jpeg'
    alt='Horizontal Card'
    className='w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105'
  />
  <div className='absolute inset-0 bg-black/50 dark:bg-black/70 opacity-100 transition-opacity duration-300 flex items-end p-4'>
    <div className='flex flex-col justify-end p-4'>
      <div className='text-white text-xl font-bold mb-1'>Creative Collaboration</div>
      <div className='text-gray-200 text-sm'>Work together in real-time with your team, anywhere.</div>
    </div>
  </div>
</div>

Horizontal Cards

Horizontal Card with Image

<div className='flex bg-white dark:bg-gray-900 shadow-md rounded-xl overflow-hidden'>
  <img 
    src='https://images.pexels.com/photos/6977377/pexels-photo-6977377.jpeg' 
    alt='Horizontal Card' 
    className='w-1/3 object-cover' 
  />
  <div className='p-5 flex flex-col justify-center'>
    <h3 className='text-xl font-bold text-gray-800 dark:text-gray-900'>Tech Innovation</h3>
    <p className='text-gray-600 dark:text-gray-900 mt-2 text-sm'>Stay ahead with the latest trends in technology and innovation.</p>
    <Button label='Read More' className='btn-primary mt-auto self-start !mt-4' />
  </div>
</div>

Dark Horizontal Card

<div className='flex bg-gray-900 dark:bg-gray-800 shadow-lg rounded-xl overflow-hidden text-white'>
  <div className='p-5 flex flex-col justify-center w-2/3 text-white'>
    <h3 className='text-xl font-bold !text-white'>Creative Design</h3>
    <p className='mt-2 text-sm !text-white'>Discover inspiring design ideas and improve your visual creativity.</p>
    <Button label='Explore' className='btn-light mt-auto self-start !mt-4' />
  </div>
  <img 
    src='https://images.pexels.com/photos/6941090/pexels-photo-6941090.jpeg' 
    alt='Design' 
    className='w-1/3 object-cover' 
  />
</div>

Blog Cards

Simple Blog Card

<Card className='!p-0 overflow-hidden dark:bg-gray-900'>
  <img 
    src='https://images.pexels.com/photos/9934462/pexels-photo-9934462.jpeg' 
    alt='Modern Blog' 
    className='w-full h-48 object-cover' 
  />
  <div className='p-4'>
    <div className='font-bold text-xl mb-2 text-gray-800 dark:text-gray-100'>Modern Workspace Inspiration</div>
    <div className='text-gray-600 dark:text-gray-400 mb-4'>Discover the latest trends in modern workspace design and how to create a productive environment.</div>
    <div className='flex items-center justify-between text-xs text-gray-400 dark:text-gray-500'>
      <span>12 Jun 2024</span>
      <div className='flex gap-4'>
        <span className='flex items-center gap-1'>
          <svg width='16' height='16' fill='none' stroke='currentColor' strokeWidth='2' viewBox='0 0 24 24'>
            <path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z' />
          </svg> 8
        </span>
        <span className='flex items-center gap-1'>
          <svg width='16' height='16' fill='none' stroke='currentColor' strokeWidth='2' viewBox='0 0 24 24'>
            <path d='M17 2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10z' />
          </svg> 3
        </span>
      </div>
    </div>
  </div>
</Card>

Enhanced Blog Card

<Card className='!p-0 overflow-hidden rounded-2xl shadow-md hover:shadow-lg transition-shadow dark:bg-gray-900'>
  <div className='overflow-hidden'>
    <img 
      src='https://images.pexels.com/photos/9436715/pexels-photo-9436715.jpeg' 
      alt='Minimal Blog' 
      className='w-full h-48 object-cover transition-transform duration-300 hover:scale-105' 
    />
  </div>
  <div className='p-5'>
    <span className='inline-block text-xs font-semibold text-blue-600 dark:text-blue-400 uppercase mb-2'>Workspace</span>
    <h3 className='text-lg font-bold text-gray-800 dark:text-gray-100 mb-2'>Minimalist Setup for Maximum Focus</h3>
    <p className='text-sm text-gray-600 dark:text-gray-400 mb-4'>Learn how minimalism in workspace design can reduce distractions and boost productivity.</p>
    <div className='flex items-center justify-between text-xs text-gray-400 dark:text-gray-500'>
      <span>28 Jun 2024</span>
      <div className='flex gap-4'>
        <span className='flex items-center gap-1'>
          <svg width='16' height='16' fill='none' stroke='currentColor' strokeWidth='2' viewBox='0 0 24 24'>
            <path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z' />
          </svg> 15
        </span>
        <span className='flex items-center gap-1'>
          <svg width='16' height='16' fill='none' stroke='currentColor' strokeWidth='2' viewBox='0 0 24 24'>
            <path d='M17 2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10z' />
          </svg> 6
        </span>
      </div>
    </div>
  </div>
</Card>

Quote Cards

Simple Quote Card

<div className='max-w-xl mx-auto bg-white dark:bg-gray-900 rounded-xl shadow-md p-6 border border-gray-100 dark:border-gray-800'>
  <div className='flex flex-col items-center mb-4'>
    <NavIcon icon='lucide:quote' size={32} className='text-gray-300 dark:text-gray-500 mb-2' />
  </div>
  <p className='text-lg italic text-gray-700 dark:text-gray-200 leading-relaxed mb-4'>
    "I learned very early the difference between knowing the name of something and knowing something."
  </p>
  <div className='text-right'>
    <span className='text-sm text-gray-500 dark:text-gray-400 font-medium'>— Richard P. Feynman</span>
  </div>
</div>

Colored Quote Card

<div className='max-w-xl mx-auto bg-blue-500 dark:bg-blue-700 text-white rounded-2xl shadow-lg p-6 relative overflow-hidden'>
  <div className='absolute top-4 left-4 z-0'>
    <NavIcon icon='lucide:quote' size={48} className='text-white/20' />
  </div>
  <p className='text-lg font-medium leading-relaxed relative z-10 !text-white'>
    "I learned very early the difference between knowing the name of something and knowing something."
  </p>
  <div className='mt-4 text-right relative z-10'>
    <span className='text-sm opacity-90'>— Richard P. Feynman</span>
  </div>
</div>

Accent Border Cards

Left Border Accent

<div className='border-l-4 border-blue-500 bg-white dark:bg-gray-900 rounded-md shadow-sm p-4 max-w-md'>
  <h4 className='text-blue-700 dark:text-blue-400 font-semibold mb-1'>Info Card</h4>
  <p className='text-sm text-gray-700 dark:text-gray-200'>This card highlights important information using a blue accent border.</p>
</div>

Full Border Accent

<div className='border border-green-500 bg-white dark:bg-gray-900 rounded-md shadow-sm p-4 max-w-md'>
  <h4 className='text-green-700 dark:text-green-400 font-semibold mb-1'>Success</h4>
  <p className='text-sm text-gray-700 dark:text-gray-200'>Your action was completed successfully!</p>
</div>

Background Colored Cards

Solid Background Card

<div className='bg-blue-500 dark:bg-blue-700 text-white rounded-xl shadow-md p-4 flex items-center gap-4'>
  <img 
    className='w-14 h-14 rounded-full object-cover' 
    src='https://randomuser.me/api/portraits/men/32.jpg' 
    alt='Avatar' 
  />
  <div>
    <div className='text-lg font-semibold'>Samuel Ortega</div>
    <div className='text-sm opacity-90'>Completed today</div>
  </div>
</div>

Bordered Background Card

<div className='bg-gray-100 dark:bg-gray-800 border-2 border-blue-500 dark:border-blue-400 text-gray-800 dark:text-white rounded-xl shadow-md p-4 flex items-center gap-4'>
  <img 
    className='w-14 h-14 rounded-full object-cover' 
    src='https://randomuser.me/api/portraits/women/44.jpg' 
    alt='Avatar' 
  />
  <div>
    <div className='text-lg font-semibold'>Ava Martin</div>
    <div className='text-sm opacity-90'>Finished by today</div>
  </div>
</div>

Feature Cards

Icon Feature Card

<div className='flex items-center gap-4 bg-white dark:bg-gray-900 rounded-xl shadow p-4 border border-gray-100 dark:border-gray-800'>
  <div className='p-3 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-full'>
    <NavIcon icon='lucide:lock' size={24} className='w-6 h-6' />
  </div>
  <div>
    <div className='text-lg font-semibold text-gray-800 dark:text-gray-100'>Secure Access</div>
    <div className='text-sm text-gray-500 dark:text-gray-400'>Only verified users</div>
  </div>
</div>

Centered Feature Card

<div className='flex flex-col items-center text-center bg-white dark:bg-gray-900 rounded-xl shadow p-6 border border-gray-100 dark:border-gray-800'>
  <div className='p-3 bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400 rounded-full mb-4'>
    <NavIcon icon='lucide:check-circle' size={28} className='w-7 h-7' />
  </div>
  <div className='text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1'>Task Completed</div>
  <div className='text-sm text-gray-500 dark:text-gray-400'>12 done today</div>
</div>

Dashboard Cards

Statistics Card with Chart

<Card className='flex flex-col !p-0'>
  <div className='p-4'>
    <div className='flex items-center gap-2'>
      <Avatar icon='lucide:user' className='text-green-600 dark:text-green-400' />
      <h4>Pharmacy</h4>
    </div>
    <h1 className='font-bold !mb-0 mt-2'>$42,400</h1>
    <span className={'flex items-center gap-1 text-sm'}>
      <NavIcon icon={'lucide:chevron-u'} size={16} />4 Doctors joined this week
    </span>
  </div>
  <div>
    <Sparkline color={'#16A34A'} height={40} type='area' />
  </div>
</Card>

Crypto Card

<Card className='card-default'>
  <div className='p-4'>
    <div className='flex items-center justify-between mb-3'>
      <div className='flex items-center gap-2'>
        <Avatar icon='token-branded:btc' className='bg-transparent'></Avatar>
        <div>
          <h6 className='!mb-0'>Bitcoin</h6>
          <span className='text-gray-500 dark:text-gray-400 text-sm'>BTC</span>
        </div>
      </div>
      <div className='text-right'>
        <h5 className='!mb-0 text-blue-600'>$29,986.00</h5>
        <span className='text-green-500 text-sm'>+2.5%</span>
      </div>
    </div>
    <Sparkline color={'#16A34A'} width={20} height={40} type='line' />
  </div>
</Card>

Revenue Card

<Card className='h-fit'>
  <div className='flex items-center space-x-6 rtl:space-x-reverse'>
    <div className='flex-none ltr:ml-auto rtl:mr-auto max-w-[100px]'>
      <Sparkline color={'#16A34A'} width={20} height={40} type='area' />
    </div>
    <div className='flex-1'>
      <p>Total revenue</p>
      <h1>3,564</h1>
    </div>
  </div>
</Card>

Examples

Basic Card with Header & Footer

<div>
  <h4>Card Basic Header & Footer</h4>
  <Card className='card-default'>
    <Card.Header>Card Heading</Card.Header>
    <Card.Body>They all have something to say beyond the words on the page. They can come across as casual or neutral, exotic or graphic.</Card.Body>
    <Card.Footer>Card Footer</Card.Footer>
  </Card>
</div>

Card with Custom Header

<Card className='!p-0 dark:bg-gray-900' header={<h4 className='!mb-0'>Featured</h4>}>
  <div className='p-4'>
    Special title treatment Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage
    <Button className='btn-primary mt-2'>Read More</Button>
  </div>
</Card>

CSS Classes Reference

Base Classes

.card - Base card class with padding, rounded corners, and borders
.card-header - Header section styling
.card-body - Body section styling
.card-footer - Footer section styling

Variants

.card-default - Card without default padding
.skin-shadow - Card with shadow styling

Styling

The Card component uses Tailwind CSS classes and includes:

Responsive Design: Works on all screen sizes
Dark Mode Support: Automatic dark mode variants
Flexible Layout: Supports various content layouts
Border Styling: Configurable borders and shadows
Image Support: Optimized image handling with overlays
Hover Effects: Smooth transitions and hover states

Accessibility

The Card component includes accessibility features:

Semantic HTML structure
Proper color contrast ratios
Screen reader friendly content
Keyboard navigation support
Focus indicators

Best Practices

Use appropriate card types for different content:
- Blog cards for articles and posts
- Feature cards for highlighting capabilities
- Dashboard cards for statistics and data
- Quote cards for testimonials
Maintain consistent spacing within card layouts
Use meaningful images that enhance the content
Provide clear hierarchy with proper headings
Consider mobile responsiveness for all card layouts
Use appropriate shadows for depth and emphasis

Common Use Cases

Content organization: Grouping related information
Blog posts: Article previews and summaries
Product displays: Showcasing items and features
Dashboard widgets: Statistics and metrics
Testimonials: Customer reviews and quotes
Feature highlights: Product capabilities and benefits

CardHeader - Card header component
CardBody - Card body component
CardFooter - Card footer component
Avatar - Used for user avatars in cards
Button - For call-to-action buttons in cards
Sparkline - For charts and graphs in dashboard cards

Overview​

Basic Usage​

Props​

Card Props​

CardHeader Props​

CardBody Props​

CardFooter Props​

Basic Card Structure​

Simple Card​

Card with Header, Body, and Footer​

Card Variants​

Default Card​

Card Default (No Padding)​

Sales Card​

Image Cards​

Card with Image and Overlay​

Card with Image and Bottom Overlay​

Horizontal Cards​

Horizontal Card with Image​

Dark Horizontal Card​

Blog Cards​

Simple Blog Card​

Enhanced Blog Card​

Quote Cards​

Simple Quote Card​

Colored Quote Card​

Accent Border Cards​

Left Border Accent​

Full Border Accent​

Background Colored Cards​

Solid Background Card​

Bordered Background Card​

Feature Cards​

Icon Feature Card​

Centered Feature Card​

Dashboard Cards​

Statistics Card with Chart​

Crypto Card​

Revenue Card​

Examples​

Basic Card with Header & Footer​

Card with Custom Header​

CSS Classes Reference​

Base Classes​

Variants​

Styling​

Accessibility​

Best Practices​

Common Use Cases​

Related Components​