# Card

## API Reference

### Props

### Card

| Name                                    | Type           | Default | Description               |
| --------------------------------------- | -------------- | ------- | ------------------------- |
| type<mark style="color:red;">\*</mark>  | `CardType`     |         | The type of the card.     |
| title<mark style="color:red;">\*</mark> | `string`       |         | The title of the card.    |
| subtitle                                | `string`       |         | The subtitle of the card. |
| icon                                    | `IconEnum`     |         | The icon of the card.     |
| image                                   | `string`       |         | The image of the card.    |
| actions                                 | `ActionsProps` |         | The actions for the card. |

## Examples

### Basic

```tsx
import { Section, Header, Cards, Card } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block>
      <Card 
        title="Title"
        subtitle="Subtitle"
        icon="ArchiveBoxXMarkIcon"
        type="vertical"
      />
    </Block>
  );
}
```

### With image

```tsx
import { Section, Header, Cards, Card } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block>
      <Card 
        title="Title"
        subtitle="Subtitle"
        image="https://source.unsplash.com/1000x500/?gradient&backgrounds"
        icon="ArchiveBoxXMarkIcon"
        type="vertical"
      />
    </Block>
  );
}
```

### With actions

```tsx
import { Section, Header, Cards, Card, Actions, Button } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block>
      <Card 
        title="Title"
        subtitle="Subtitle"
        icon="ArchiveBoxXMarkIcon"
        type="vertical"
        actions={{ button: { text: "Show more", url: "https://getstage.app" }}}
      />
    </Block>
  );
}
```

## Types

### CardType

```tsx
type CardType = "vertical" | "horizontal" | "small" | "big";
```

Supported card types for the `Card` component.