Card

import { Badge, Button, Card } from '@manti-ui/react';

export default function CardBasic() {
  return (
    <Card className="w-full max-w-[calc(var(--manti-space-16)*5)]">
      <Card.Header>
        <div className="flex justify-between items-center">
          <Card.Title>Kayseri Mantısı</Card.Title>
          <Badge variant="primary" dot>
            Fresh
          </Badge>
        </div>
        <Card.Description>
          Tiny dumplings, garlic yogurt, paprika butter.
        </Card.Description>
      </Card.Header>
      <Card.Body>
        Hand-folded four-corner parcels, simmered until tender and finished with
        a smooth drizzle of warm chili oil.
      </Card.Body>
      <Card.Footer>
        <Button size="sm">Cook now</Button>
        <Button size="sm" variant="tertiary">
          Save
        </Button>
      </Card.Footer>
    </Card>
  );
}