Card

Used to display content related to a single subject.

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.

First Name

Last Name

<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>