Card
Display an Card
Title
Description
Usage
Import the elements:
import { Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle } from "doplo/card"
Use in body:
<Card>
<CardHeader>
<CardTitle> Title </CardTitle>
<CardDescription> Description </CardDescription>
</CardHeader>
<CardBody className="flex flex-col gap-2">
<Input type="email" placeholder="Input" className="w-full"/>
<Textarea placeholder="Textarea" className="w-full"/>
</CardBody>
<CardFooter>
<Button className="w-full"> Submit </Button>
</CardFooter>
</Card>
Structure
A Card component contains:
- Card: Tag for Card.
- Card Header: Tag for Card Header.
- Card Title: Tag for Card Title.
- Card Description: Tag for Card Description.
- Card Body: Tag for Card Body.
- Card Footer: Tag for Card Footer.
- Children: Content in all the tags.
Props
Props that can be used in a Card component:
NameTypeDescriptionDefault
props?-All props of HTML div element-
ref?-ref of the div element-
? indicates that the prop is optional
Example
Some uses for Card component:
Working on it.
Build by Ayush Tomar. The source code is available on Github.