Card
Displays a card with header, content, and footer.
Login to your account
Enter your email below to login to your account
"use client"
import {
Button,
Card,Usage
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "uilab-core"<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
<CardAction>Card Action</CardAction>
</CardHeader>
<CardContent>
<p>Card Content</p>
</CardContent>
<CardFooter>
<p>Card Footer</p>
</CardFooter>
</Card>Examples
Sizes
Use the size="sm" prop to set the size of the card to small. The small size variant uses smaller spacing.
Scheduled reports
Weekly snapshots. No more manual exports.
- Choose a schedule (daily, or weekly).
- Send to channels or specific teammates.
- Include charts, tables, and key metrics.
"use client"
import {
Button,
Card,Image
Add an image before the card header to create a card with an image.
Featured
Design systems meetup
A practical talk on component APIs, accessibility, and shipping faster.
"use client"
import {
Badge,
Button,