Card

Example

A container component that groups related content and actions.

import { Card, CardContent, CardTitle, CardDescription } from "@yummacss/ui";

export default function Page() {
  return (
    <Card variant="base">
      <CardContent>
        <CardTitle>Reset Password</CardTitle>
        <CardDescription>Enter your email to reset your password.</CardDescription>
      </CardContent>
    </Card>
  );
};

Custom styling

Apply custom styles to the <Card> component.

import { Card } from "@yummacss/ui";

<Card className="...">...</Card>;

Extend properties

Extend the <Card> component with native <div> HTML attributes.

import { Card } from "@yummacss/ui";

<Card {...props}>
  ...
</Card>