## `<w-card>` API

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

### Properties

| Name | Type | Default | Summary |
|-|-|-|-|
| clickable | `boolean` | `false` | Whether the whole card is interactive. |
| flat | `boolean` | `false` | Whether the card uses the flat visual treatment. |
| keypressed (JS only) | `keypressed(e: KeyboardEvent) => void` | `-` | - |
| selected | `boolean` | `false` | Whether the card is visually selected. |

### Property Details

#### clickable

Whether the whole card is interactive.

When set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice.

- Type: `boolean`
- Default: `false`

#### flat

Whether the card uses the flat visual treatment.

Flat cards use a bordered surface instead of the default elevated surface. Use this for denser layouts or when the card sits inside another surface.

- Type: `boolean`
- Default: `false`

#### keypressed (JS only)



- Type: `keypressed(e: KeyboardEvent) => void`
- Default: `-`

#### selected

Whether the card is visually selected.

Use this when the card represents a selected item or choice. This only controls the visual selected state; update it from your application state when the selection changes.

- Type: `boolean`
- Default: `false`

