## `` 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. **Deprecated**: This will be removed in a future version. Use data-card-action attribute on a link or button inside the card instead. | | 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 **Deprecated**: This will be removed in a future version. Use data-card-action attribute on a link or button inside the card instead. 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`