Docs
Card

Card

Displays a card with header, content, and footer.

Source

Create project

Deploy your new project in one-click.

Installation

Copy and paste the following code into your project.

import clsx from 'clsx';
import { HTMLAttributes, forwardRef } from 'react';
import styles from './styles.module.scss';
 
const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
    <div ref={ref} className={clsx(styles.card, className)} {...props} />
));
Card.displayName = 'Card';
 
const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
    <div ref={ref} className={clsx(styles.card__header, className)} {...props} />
));
CardHeader.displayName = 'CardHeader';
 
const CardTitle = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLHeadingElement>>(
    ({ className, ...props }, ref) => <h3 ref={ref} className={clsx(styles.card__title, className)} {...props} />
);
CardTitle.displayName = 'CardTitle';
 
const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
    ({ className, ...props }, ref) => <p ref={ref} className={clsx(styles.card__description, className)} {...props} />
);
CardDescription.displayName = 'CardDescription';
 
const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
    <div ref={ref} className={clsx(styles.card__content, className)} {...props} />
));
CardContent.displayName = 'CardContent';
 
const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
    <div ref={ref} className={clsx(styles.card__footer, className)} {...props} />
));
CardFooter.displayName = 'CardFooter';
 
export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

Update the import paths to match your project setup.

Usage

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
<Card>
    <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card Description</CardDescription>
    </CardHeader>
    <CardContent>
        <p>Card Content</p>
    </CardContent>
    <CardFooter>
        <p>Card Footer</p>
    </CardFooter>
</Card>

Examples

Notifications

You have 3 unread messages.

Push Notifications

Send notifications to device.

Your call has been confirmed.

1 hour ago

You have a new message!

1 hour ago

Your subscription is expiring soon!

2 hours ago