#Basic

A summary of your account.
<Card>A summary of your account.</Card>,

#CardBody

A summary of your account.
<Card>
  <CardBody>A summary of your account.</CardBody>
</Card>

#CardHeader and CardBody

Summary
A summary of your account.
<Card>
  <CardHeader>Summary</CardHeader>
  <CardBody>A summary of your account.</CardBody>
</Card>

#CardBody and CardFooter

A summary of your account.
<Card>
  <CardBody>A summary of your account.</CardBody>
  <CardFooter>
    <Button>Close</Button>
  </CardFooter>
</Card>

#CardHeader, CardBody and CardFooter

Summary
A summary of your account.
<Card>
  <CardHeader>Summary</CardHeader>
  <CardBody>A summary of your account.</CardBody>
  <CardFooter>
    <Button>Close</Button>
  </CardFooter>
</Card>

#Rounded

Set rounded to "square", "sm", or "lg". Defaults to the value of the CSS variable --default-roundedness. See "Default roundedness".
Summary
A summary of your account.
Summary
A summary of your account.
Summary
A summary of your account.
<Stack class="gap-5">
  <Card rounded="square">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
  <Card rounded="sm">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
  <Card rounded="lg">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
</Stack>

#Width

Set width to "sm", "md", "lg", or "full". Defaults to "md".
Summary
A summary of your account.
Summary
A summary of your account.
Summary
A summary of your account.
Summary
A summary of your account.
<Stack class="gap-5">
  <Card width="sm">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
  <Card width="md">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
  <Card width="lg">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
  <Card width="full">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
</Stack>

#Shadow

Set shadow to "sm", "md", or "lg". Defaults to "sm".
Summary
A summary of your account.
Summary
A summary of your account.
Summary
A summary of your account.
<Stack class="gap-5">
  <Card shadow="sm">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
  <Card shadow="md">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
  <Card shadow="lg">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
</Stack>

#Padding

Set padding to "sm", "md", or "lg". Defaults to "md".
Summary
A summary of your account.
Summary
A summary of your account.
Summary
A summary of your account.
<Stack class="gap-5">
  <Card padding="sm">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
  <Card padding="md">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
  <Card padding="lg">
    <CardHeader>Summary</CardHeader>
    <CardBody>A summary of your account.</CardBody>
    <CardFooter>
      <Button>Close</Button>
    </CardFooter>
  </Card>
</Stack>

#Realistic

Profile

Please fill out the following information.
<Card>
  <CardHeader>
    <h1 class="font-bold tracking-wide text-neutral-700">Profile</h1>
  </CardHeader>
  <CardBody>
    <div class="mb-6 text-neutral-700">
      Please fill out the following information.
    </div>
    <Stack class="gap-3">
      <FormField label="Name" type="text" />
      <FormField label="Email" type="email" />
      <FormField label="Age" type="number" />
    </Stack>
  </CardBody>
  <CardFooter>
    <Flex class="gap-2">
      <Button variant="primary">Submit</Button>
      <Button>Cancel</Button>
    </Flex>
  </CardFooter>
</Card>

#Top accent

Set topAccent to true. You'll also probably want to set rounded to "square".

Profile

Please fill out the following information.
<Card topAccent rounded="square">
  <CardHeader>
    <h1 class="font-bold tracking-wide text-neutral-700">Profile</h1>
  </CardHeader>
  <CardBody>
    <div class="mb-6 text-neutral-700">
      Please fill out the following information.
    </div>
    <Stack class="gap-3">
      <FormField label="Name" type="text" />
      <FormField label="Email" type="email" />
      <FormField label="Age" type="number" />
    </Stack>
  </CardBody>
  <CardFooter>
    <Flex class="gap-2">
      <Button variant="primary">Submit</Button>
      <Button>Cancel</Button>
    </Flex>
  </CardFooter>
</Card>

#Left accent

Set leftAccent to true. You'll also probably want to set rounded to "square".

Profile

Please fill out the following information.
<Card leftAccent rounded="square">
  <CardHeader>
    <h1 class="font-bold tracking-wide text-neutral-700">Profile</h1>
  </CardHeader>
  <CardBody>
    <div class="mb-6 text-neutral-700">
      Please fill out the following information.
    </div>
    <Stack class="gap-3">
      <FormField label="Name" type="text" />
      <FormField label="Email" type="email" />
      <FormField label="Age" type="number" />
    </Stack>
  </CardBody>
  <CardFooter>
    <Flex class="gap-2">
      <Button variant="primary">Submit</Button>
      <Button>Cancel</Button>
    </Flex>
  </CardFooter>
</Card>

#As link

To make the Card act as a link, wrap it in Link. You'll probably also want to add pointer-events: none; to Card.
Click to visit example.com
<Link href="https://example.com">
  <Card class="pointer-events-none">
    <CardBody>
      Click to visit example.com
    </CardBody>
  </Card>
</Link>

#Props

rounded
Required
false
Type
"square" | "sm" | "lg"
Default
none
Notes
Defaults to the value of the CSS variable --default-roundedness. See "Default roundedness".
width
Required
false
Type
"sm" | "md" | "lg" | "full"
Default
"md"
shadow
Required
false
Type
"sm" | "md" | "lg"
Default
"sm"
topAccent
Required
false
Type
boolean
Default
false
leftAccent
Required
false
Type
boolean
Default
false
padding
Required
false
Type
"sm" | "md" | "lg"
Default
"md"
children*
Required
true
Type
ComponentChild
Default
none
...rest
Required
false
Type
Omit<ComponentProps<"div">, "size">
Default
none
Notes
See the docs for rest parameters. For Card, you could pass anything you normally would pass to <div> because the return value looks something like this:
<div class={containerClass} {...restWithoutClass}>
  {children}
</div>

CardHeader

children*
Required
true
Type
ComponentChild
Default
none
...rest
Required
false
Type
ComponentProps<"div">
Default
none

CardBody

children*
Required
true
Type
ComponentChild
Default
none
...rest
Required
false
Type
ComponentProps<"div">
Default
none

CardFooter

children*
Required
true
Type
ComponentChild
Default
none
...rest
Required
false
Type
ComponentProps<"div">
Default
none