Nue Camp
This is the card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum. Curabitur nec odio vel dui euismod fermentum.
<Card className="max-w-xs">
<CardBody className="gap-2">
<Avatar src="https://picsum.photos/200/300" alt="Nue Camp" size="lg" square />
<Heading level={5}>Nue Camp</Heading>
<Text>
This is the card body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum. Curabitur nec odio vel dui euismod fermentum.
</Text>
</CardBody>
<CardFooter className="justify-end">
<Button variant="outline">View</Button>
<Button>Join</Button>
</CardFooter>
</Card>Examples
Within Form
Use the Card component within a form to group related fields together.
Sign up
Fill in the form below to create an account.
<Card className="max-w-xs">
<CardHeader>
<Heading level={5}>Sign up</Heading>
<Text>Fill in the form below to create an account.</Text>
</CardHeader>
<CardBody className="gap-2">
<Field label="First Name">
<Input />
</Field>
<Field label="Last Name">
<Input />
</Field>
</CardBody>
<CardFooter className="justify-end">
<Button variant="ghost">Cancel</Button>
<Button>Sign up</Button>
</CardFooter>
</Card>With Image
Use the Card component to display an image.
Living room Sofa
This sofa is perfect for modern tropical spaces, baroque inspired spaces.
$450<Card className="max-w-xs overflow-hidden">
<img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" alt="Green double couch with wooden legs" />
<CardBody className="gap-2">
<Heading level={5}>Living room Sofa</Heading>
<Text>This sofa is perfect for modern tropical spaces, baroque inspired spaces.</Text>
<Strong className="text-2xl">$450</Strong>
</CardBody>
<CardFooter>
<Button>Buy now</Button>
<Button variant="ghost">Add to cart</Button>
</CardFooter>
</Card>Horizontal
Use the Card component to display content horizontally.
The perfect latte
Caffè latte is a coffee beverage of Italian origin made with espresso and steamed milk.
<Card className="max-w-xl flex-row overflow-hidden">
<img src="https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60" alt="Caffe Latte" className="max-w-48 object-cover" />
<div>
<CardBody className="gap-2">
<Heading level={5}>The perfect latte</Heading>
<Text>Caffè latte is a coffee beverage of Italian origin made with espresso and steamed milk.</Text>
</CardBody>
<CardFooter>
<Button>Buy Latte</Button>
</CardFooter>
</div>
</Card>With Avatar
Use the Card component to display an avatar.
Nate Foss
@natefoss
Nate Foss has requested to join your team. You can approve or decline their request.
<Card className="max-w-xs">
<CardBody className="gap-2">
<div className="flex items-center gap-2">
<Avatar src="https://images.unsplash.com/photo-1511806754518-53bada35f930" size="md" />
<div className="flex flex-col">
<Strong>Nate Foss</Strong>
<Text>@natefoss</Text>
</div>
</div>
<Text>
<Strong>Nate Foss</Strong> has requested to join your team. You can approve or decline their request.
</Text>
</CardBody>
<CardFooter>
<Button variant="ghost" className="flex-1">
<LuX size={16} /> Decline
</Button>
<Button className="flex-1">
<LuCheck size={16} /> Approve
</Button>
</CardFooter>
</Card>