Docs
Card

Card

Card component is a versatile container that elegantly displays content within a structured layout. Featuring a header, content section, and optional footer, the Card provides an organized and visually appealing way to present information, making it suitable for various contexts such as articles, product details, or user profiles.

NPM

Create project

Deploy your new project in one-click.

Installation

yarn add @camped-ui/card

Usage

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@camped-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

ButtonCarousel