Card

Card is a flexible content container with optional header, body, and footer sections.

Open in Storybook

Import

import { Card, CardHeader, CardBody, CardFooter } from "@tosui/react";

Basic Usage

Preview

Code

<Card>
  <CardBody>
    This is the card content.
  </CardBody>
</Card>

With Header

Preview

Card Title

Card content goes here.

Code

<Card>
  <CardHeader>
    <Heading fontSize="lg">Card Title</Heading>
  </CardHeader>
  <CardBody>
    Card content goes here.
  </CardBody>
</Card>

With Footer

Preview

Confirm Action

Are you sure you want to proceed with this action?

Code

<Card>
  <CardHeader>
    <Heading fontSize="lg">Confirm Action</Heading>
  </CardHeader>
  <CardBody>
    Are you sure you want to proceed with this action?
  </CardBody>
  <CardFooter>
    <HStack justify="flex-end" gap={2}>
      <Button variant="ghost">Cancel</Button>
      <Button>Confirm</Button>
    </HStack>
  </CardFooter>
</Card>

Shadow Variants

Preview

No shadow

Small shadow

Medium shadow

Large shadow

Code

<HStack gap={4} wrap>
  <Card shadow="none" w="200px">
    <CardBody>No shadow</CardBody>
  </Card>
  <Card shadow="sm" w="200px">
    <CardBody>Small shadow</CardBody>
  </Card>
  <Card shadow="md" w="200px">
    <CardBody>Medium shadow</CardBody>
  </Card>
  <Card shadow="lg" w="200px">
    <CardBody>Large shadow</CardBody>
  </Card>
</HStack>

Common Patterns

Product Card

<Card w="300px">
  <Image src="/product.jpg" alt="Product" h="200px" />
  <CardBody>
    <VStack gap={2} align="flex-start">
      <Badge colorScheme="success">In Stock</Badge>
      <Heading fontSize="lg">Product Name</Heading>
      <Text color="foreground-muted">Short product description</Text>
      <Text fontWeight="bold" fontSize="lg">$99.99</Text>
    </VStack>
  </CardBody>
  <CardFooter>
    <Button fullWidth>Add to Cart</Button>
  </CardFooter>
</Card>

Profile Card

<Card>
  <CardBody>
    <VStack gap={4}>
      <Avatar size="xl" name="John Doe" />
      <VStack gap={1}>
        <Heading fontSize="lg">John Doe</Heading>
        <Text color="foreground-muted">Software Engineer</Text>
      </VStack>
      <HStack gap={8}>
        <VStack gap={0}>
          <Text fontWeight="bold">124</Text>
          <Text fontSize="sm" color="foreground-muted">Posts</Text>
        </VStack>
        <VStack gap={0}>
          <Text fontWeight="bold">5.2k</Text>
          <Text fontSize="sm" color="foreground-muted">Followers</Text>
        </VStack>
      </HStack>
    </VStack>
  </CardBody>
  <CardFooter>
    <Button fullWidth variant="outline">Follow</Button>
  </CardFooter>
</Card>

Settings Card

<Card>
  <CardHeader>
    <Heading fontSize="md">Notification Settings</Heading>
  </CardHeader>
  <CardBody>
    <VStack gap={4} align="stretch">
      <HStack justify="space-between">
        <Text>Email notifications</Text>
        <Switch defaultChecked />
      </HStack>
      <HStack justify="space-between">
        <Text>Push notifications</Text>
        <Switch />
      </HStack>
    </VStack>
  </CardBody>
</Card>

Props Reference

Card

Prop	Type	Default	Description
shadow	"none" | "sm" | "md" | "lg"	"sm"	Shadow elevation

CardHeader, CardBody, CardFooter

These components accept className and children props only.

TypeScript

import { Card, CardHeader, CardBody, CardFooter, type CardProps, type CardHeaderProps, type CardBodyProps, type CardFooterProps } from "@tosui/react";