# Clickable Card

## Usage

`ClickableCard` is a card whose whole surface activates one action. The keyboard stop is a visually hidden link when `href` is set, and a button otherwise. Nested buttons and links keep their own clicks.

```vue
<script setup lang="ts">
import { ClickableCard } from '@astryx-vue/core/ClickableCard'
import { Heading } from '@astryx-vue/core/Heading'
</script>

<template>
  <ClickableCard href="/settings" label="Settings">
    <Heading :level="4">
      Settings
    </Heading>
  </ClickableCard>
</template>
```

`target="_blank"` opens `href` in a new tab. Modifier clicks and the middle button do the same. `elevation` and `variant` are forwarded to `Card`.

### Anatomy

- **Container**: Interactive div with hover/focus/active states.
- **Content**: Children, which may include nested interactive elements.

## Examples

### Elevated

Quarterly report, raised with a medium shadow.

```vue
<script setup lang="ts">
import { ClickableCard } from '@astryx-vue/core/ClickableCard'
import { Heading } from '@astryx-vue/core/Heading'
import { VStack } from '@astryx-vue/core/Stack'
import { Text } from '@astryx-vue/core/Text'
</script>

<template>
  <ClickableCard elevation="med" href="#" label="Open report" :width="320">
    <VStack :gap="2">
      <Heading :level="4">
        Quarterly report
      </Heading>
      <Text color="secondary" type="body">
        A raised shadow signals the whole card is clickable, lifting it above the surrounding content.
      </Text>
    </VStack>
  </ClickableCard>
</template>
```
### Nested button

Wireless Headphones. Add to cart is its own button.

```vue
<script setup lang="ts">
import { Button } from '@astryx-vue/core/Button'
import { ClickableCard } from '@astryx-vue/core/ClickableCard'
import { Heading } from '@astryx-vue/core/Heading'
import { VStack } from '@astryx-vue/core/Stack'
import { Text } from '@astryx-vue/core/Text'
</script>

<template>
  <ClickableCard href="#" label="Product" :width="320">
    <VStack :gap="3">
      <VStack :gap="1">
        <Heading :level="4">
          Wireless Headphones
        </Heading>
        <Text color="secondary" type="body">
          $79.99
        </Text>
      </VStack>
      <Button label="Add to cart" variant="primary" />
    </VStack>
  </ClickableCard>
</template>
```

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | - | Accessible name of the hidden control. |
| `href` | `string` | - | Address the card navigates to. Leave it unset to handle `click` instead. |
| `target` | `string` | - | Browsing context for `href`. `_blank` opens a new tab. |
| `isDisabled` | `boolean` | `false` | The card ignores activation. |
| `variant` | `CardVariant` | `'default'` | Background variant, forwarded to `Card`. |
| `elevation` | `CardElevation` | `'none'` | Resting shadow: none, low, med, or high. |
| `padding` | `SpacingStep` | - | Padding forwarded to `Card`. |
| `width` | `number \| string` | - | Width. Numbers are pixels. |
| `height` | `number \| string` | - | Height. Numbers are pixels. |
| `maxWidth` | `number \| string` | - | Maximum width. |

## Events

| Name | Payload | Description |
| --- | --- | --- |
| `click` | `MouseEvent` | The surface was activated. Nested controls do not emit it. |

## Slots

The default slot is the card body.