# Card
Structured container with header, content, and footer sections.

## Import/Installation

<Tabs items={[{ label: 'Package', value: 'package' }, { label: 'Registry', value: 'registry' }]}>
  <TabsContent value="package">
    ```tsx
    import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@lottiefiles/creator-plugins-ui";
    ```
  </TabsContent>

  <TabsContent value="registry">
    ```bash
    npx shadcn@latest add @lottiefiles/card
    ```
  </TabsContent>
</Tabs>

## Preview

<iframe src="https://creator-plugins-ds.lottiefiles.com/?story=card--default&mode=preview" style={{ width: "100%", border: "1px solid rgba(128, 128, 128, 0.4)", borderRadius: "8px" }} height="208" title="Card component live preview" frameBorder="no" loading="lazy" />

## Usage

```tsx
<Card size="sm">
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>Content</CardContent>
  <CardFooter>Actions</CardFooter>
</Card>
```

## Props

<PropsTable
  props={[
  {
    name: "size",
    type: '"default" | "sm" | "xs"',
    default: '"default"',
    description: "Shared size scale passed to card sub-components via context.",
  },
]}
/>

`CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, and `CardFooter` each accept an optional `size` prop with the same `"default" | "sm" | "xs"` values, which overrides the inherited size for that section.