Zudoku
General

Card

A flexible card component with header, content, and footer sections for displaying grouped information.

Import

tsxCode
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "zudoku/ui/Card";

Components

The Card component consists of several sub-components:

  • Card - The main container
  • CardHeader - Header section with padding
  • CardTitle - Styled title for the header
  • CardDescription - Muted description text
  • CardContent - Main content area
  • CardFooter - Footer section for actions

Basic Usage

Card Title

Card Description

Card content goes here.

tsxCode
<Card className="w-[350px]"> <CardHeader> <CardTitle>Card Title</CardTitle> <CardDescription>Card Description</CardDescription> </CardHeader> <CardContent> <p>Card content goes here.</p> </CardContent> </Card>

Create project

Deploy your new project in one-click.

Card content goes here.
tsxCode
<Card className="w-[350px]"> <CardHeader> <CardTitle>Create project</CardTitle> <CardDescription>Deploy your new project in one-click.</CardDescription> </CardHeader> <CardContent> <form> <div className="grid w-full items-center gap-4"> <div className="flex flex-col space-y-1.5"> <Label htmlFor="name">Name</Label> <Input id="name" placeholder="Name of your project" /> </div> </div> </form> </CardContent> <CardFooter className="flex justify-between"> <Button variant="outline">Cancel</Button> <Button>Deploy</Button> </CardFooter> </Card>
Last modified on