Card

A summary of your account.

import { 
  Card, 
  CardHeader, 
  CardHeading, 
  CardBody, 
  CardFooter
} from "rfui";

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

#CardHeading

Summary

A summary of your account.

<Card>
  <CardHeader>
    <CardHeading>Summary</CardHeading>
  </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.

Name

Age

<Card>
  <CardHeader>
    <CardHeading>Profile</CardHeading>
  </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.

Name

Age

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

Name

Age

<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

Prop	Required	Default	Type and notes
`rounded`	-	-	`"square" \| "sm" \| "lg"` Defaults to the value of the CSS variable `--default-roundedness`. See "Default roundedness".
`width`	-	`"md"`	`"sm" \| "md" \| "lg" \| "full"`
`shadow`	-	`"sm"`	`"sm" \| "md" \| "lg"`
`topAccent`	-	`false`	`boolean`
`leftAccent`	-	`false`	`boolean`
`padding`	-	`"md"`	`"sm" \| "md" \| "lg"`
`children`	✔	-	`ComponentChild`
`...rest`	-	-	`Omit<ComponentProps<"div">, "size">` 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`

Prop	Required	Default	Type and notes
`children`	✔	-	`ComponentChild`
`...rest`	-	-	`ComponentProps<"div">`

`CardHeading`

Prop	Required	Default	Type and notes
`children`	✔	-	`ComponentChild`
`...rest`	-	-	`ComponentProps<"h1">`

`CardBody`

Prop	Required	Default	Type and notes
`children`	✔	-	`ComponentChild`
`...rest`	-	-	`ComponentProps<"div">`

`CardFooter`

Prop	Required	Default	Type and notes
`children`	✔	-	`ComponentChild`
`...rest`	-	-	`ComponentProps<"div">`