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

# Card

> Container with shadow, border, and background styles

# Card

The `Card` component is a versatile container used to group related content. It provides built-in support for shadows, borders, backgrounds (including gradients), and standard padding presets.

## Usage

```jsx theme={null}
<Card padding="lg">
  <Title value="Card Title" />
  <Text value="This is the card content." />
</Card>
```

## Props

<ResponseField name="padding" type="string | number" default="md">
  Internal padding. Presets: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`.
</ResponseField>

<ResponseField name="radius" type="string" default="lg">
  Border radius. Presets: `sm`, `md`, `lg`, `xl`, `2xl`.
</ResponseField>

<ResponseField name="shadow" type="string" default="sm">
  Shadow depth: `none`, `sm`, `md`, `lg`.
</ResponseField>

<ResponseField name="background" type="string" default="surface">
  Background color. Can be `surface`, `primary`, a hex code, or a `linear-gradient(...)` string.
</ResponseField>

<ResponseField name="border" type="boolean" default="true">
  Whether to show a border.
</ResponseField>

<ResponseField name="fullWidth" type="boolean" default="true">
  Whether the card takes up 100% width.
</ResponseField>

<ResponseField name="size" type="string">
  Size preset that affects padding (`sm`, `md`, `lg`).
</ResponseField>

## Examples

### Gradient Background

```jsx theme={null}
<Card background="linear-gradient(135deg, #FF6B6B 0%, #556270 100%)" theme="dark">
  <Text value="Gradient Card" color="white" />
</Card>
```

### With Actions

Cards support built-in confirm/cancel button configurations (passed as props) or can contain custom actions in the children.

```jsx theme={null}
<Card 
  confirm={{ label: "Save", action: { type: "save" } }}
  cancel={{ label: "Cancel", action: { type: "cancel" } }}
>
  <Text value="Confirm action?" />
</Card>
```