Card

npx @obi/ui add card

import { Card, CardHeader, CardContent, CardFooter } from '@/src/components/Card/Card';
import Button from '@/src/components/Button/Button';

export default function Example() {
  return (
    <div className="flex flex-col gap-4 max-w-sm">
      <Card>
        <CardHeader>
          <p className="text-base font-semibold text-text">Default Card</p>
          <p className="text-sm text-text-muted">Grouped content with a clear boundary.</p>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-text">Card body content goes here.</p>
        </CardContent>
        <CardFooter>
          <Button variant="secondary" size="sm">Cancel</Button>
          <Button size="sm">Save</Button>
        </CardFooter>
      </Card>
      <Card variant="elevated">
        <CardContent>
          <p className="text-sm text-text">Elevated — floats above the page surface.</p>
        </CardContent>
      </Card>
      <Card variant="outline">
        <CardContent>
          <p className="text-sm text-text">Outline — transparent background with a strong border.</p>
        </CardContent>
      </Card>
    </div>
  );
}