{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"card-web","type":"registry:item","title":"Card","description":"A bounded content container that groups related text, media, and actions into one scannable unit.","files":[{"path":"snippets/web/card.tsx","content":"import { Card } from \"@heroui/react\";\n\nexport function CardExample() {\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Card className=\"w-[320px]\" variant=\"transparent\">\n        <Card.Header>\n          <Card.Title>Transparent</Card.Title>\n          <Card.Description>Minimal prominence with transparent background</Card.Description>\n        </Card.Header>\n        <Card.Content>\n          <p>Use for less important content or nested cards</p>\n        </Card.Content>\n      </Card>\n\n      <Card className=\"w-[320px]\" variant=\"default\">\n        <Card.Header>\n          <Card.Title>Default</Card.Title>\n          <Card.Description>Standard card appearance (bg-surface)</Card.Description>\n        </Card.Header>\n        <Card.Content>\n          <p>The default card variant for most use cases</p>\n        </Card.Content>\n      </Card>\n\n      <Card className=\"w-[320px]\" variant=\"secondary\">\n        <Card.Header>\n          <Card.Title>Secondary</Card.Title>\n          <Card.Description>Medium prominence (bg-surface-secondary)</Card.Description>\n        </Card.Header>\n        <Card.Content>\n          <p>Use to draw moderate attention</p>\n        </Card.Content>\n      </Card>\n\n      <Card className=\"w-[320px]\" variant=\"tertiary\">\n        <Card.Header>\n          <Card.Title>Tertiary</Card.Title>\n          <Card.Description>Higher prominence (bg-surface-tertiary)</Card.Description>\n        </Card.Header>\n        <Card.Content>\n          <p>Use for primary or featured content</p>\n        </Card.Content>\n      </Card>\n    </div>\n  );\n}\n","type":"registry:file","target":"~/snippets/web/card.tsx"}],"author":"heroui","dependencies":["@heroui/react"]}