> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Card

> Card.vue and CardHuge.vue Component Documentation

The `Card.vue` component is a reusable Vue.js container designed for structured content with optional headers, footers, and a main content area. It allows customization through named slots. The `CardHuge.vue` component extends `Card.vue` with additional styling or behavior for larger or more prominent use cases.

***

## Features

<CardGroup cols={2}>
  <Card title="Customizable Headers and Footers" icon="square-1">
    Includes optional <code>headerLeft</code>, <code>headerRight</code>, and <code>footer</code> slots for structured content.
  </Card>

  <Card title="Dynamic Content" icon="square-2">
    Allows flexible content placement in the main body and slots.
  </Card>

  <Card title="Reusable Design" icon="square-3">
    Use <code>Card.vue</code> for standard containers and <code>CardHuge.vue</code> for larger displays.
  </Card>
</CardGroup>

***

## Usage

### Basic Example with Header and Footer

```js theme={null}
import { Card } from '@robojuice/velure-ui';
```

```vue theme={null}
<template>
  <Card>
    <template #headerLeft>
      <span>Dialog</span><IconAlert />
    </template>

    <template #headerRight>
      <IconAlert />
    </template>

    <InputTextarea label="Description"></InputTextarea>

    <template #footer>
      <button @click="boxes.close('dialog')" class="button-button button-solid">
        Done
      </button>
    </template>
  </Card>
</template>
```

### Large Card Example

```js theme={null}
import { CardHuge } from '@robojuice/velure-ui';
```

```vue theme={null}
<template>
  <CardHuge>
    <template #headerLeft>
      <span>Dialog</span><IconAlert />
    </template>

    <template #headerRight>
      <IconAlert />
    </template>

    <InputTextarea label="Description"></InputTextarea>

    <template #footer>
      <button @click="boxes.close('dialog')" class="button-button button-solid">
        Done
      </button>
    </template>
  </CardHuge>
</template>
```

***

## Props

This component does not accept any props. Customization is achieved using named slots.

***

## Slots

<ParamField path="headerLeft" type="slot">
  Defines content for the left side of the header. `<template #headerLeft></template>`
</ParamField>

<ParamField path="headerRight" type="slot">
  Defines content for the right side of the header. `<template #headerRight></template>`
</ParamField>

<ParamField path="default" type="slot">
  Defines the main content of the container.
</ParamField>

<ParamField path="footer" type="slot">
  Defines content for the footer area (optional). `<template #footer></template>`
</ParamField>

***

## Example Use Cases

### Content Container with Headers and Footer

Use the `Card` component to structure a content box with a header, main body, and footer:

```vue theme={null}
<template>
  <Card>
    <template #headerLeft>
      <span>Filters</span>
    </template>

    <template #headerRight>
      <button>Reset</button>
    </template>

    <div>
      <p>Select filters for your data:</p>
      <InputTextarea label="Filter Description" />
    </div>

    <template #footer>
      <button>Apply</button>
      <button>Cancel</button>
    </template>
  </Card>
</template>
```

### Large Content Container

Use `CardHuge` for larger or more prominent content:

```vue theme={null}
<CardHuge>
  <template #headerLeft>
    <span>Important Settings</span>
  </template>

  <p>This container displays important settings for the application.</p>

  <template #footer>
    <button>Save</button>
    <button>Cancel</button>
  </template>
</CardHuge>
```

***

## Notes

* **Slot Customization**: The `Card` and `CardHuge` components rely entirely on named slots for customization, making them highly flexible for different use cases.
* **Reusability**: Use `Card.vue` for standard containers and `CardHuge.vue` for larger layouts.
* **Styling**: The appearance of these components is controlled by CSS classes applied in the template.

For further customization, refer to the component's source code.