# swc-card

```js
import '@adobe/spectrum-wc/components/card/index.js';
// <swc-card></swc-card>
```

## Attributes

| Name            | Type          | Default     | Description                                                                                                                                                     |
| --------------- | ------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `size`          | `ElementSize` | -           | The size of the card.                                                                                                                                           |
| `variant`       | `CardVariant` | `'primary'` | The visual variant of the card.                                                                                                                                 |
| `density`       | `CardDensity` | `'regular'` | The density of the card, controlling internal spacing and gaps.                                                                                                 |
| `title-as-link` | `boolean`     | `false`     | Indicates the consumer has wrapped their `title` slot content in a real link.                                                                                   |
| `selectable`    | `boolean`     | `false`     | Makes the card focusable and captures surface clicks (excluding nested interactive targets) to dispatch a `swc-card-click` event, independent of `titleAsLink`. |

## Slots

| Name          | Description                                                                                         |
| ------------- | --------------------------------------------------------------------------------------------------- |
| `collection`  | Optional collection images. Assign each image to the slot.                                          |
| `media`       | Optional overlay content (e.g. a badge or avatar) layered over the preview/collection media region. |
| `preview`     | Primary preview content                                                                             |
| `title`       | Card title                                                                                          |
| `actions`     | Optional action controls                                                                            |
| `description` | Supporting description text                                                                         |
| `footer`      | Optional footer content                                                                             |
| `(default)`   | Additional body content                                                                             |

## Events

| Name             | Description                                                                |
| ---------------- | -------------------------------------------------------------------------- |
| `swc-card-click` | Dispatched when a `selectable` card is activated (click, Enter, or Space). |

## CSS Custom Properties

| Name                                       | Description                                                                                                                                                                 |
| ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--swc-card-collection-item-aspect-ratio`  | Aspect ratio of each collection image. Defaults to 1 (square).                                                                                                              |
| `--swc-card-collection-gap`                | Gap between collection images, and between the preview and the collection row. Defaults to an extra-small group-gap token, overridden at size="xs".                         |
| `--swc-card-gallery-preview-aspect-ratio`  | Aspect ratio of the preview image in the gallery layout (a preview-only card). Defaults to 1 (square).                                                                      |
| `--swc-card-base-max-inline-size`          | Maximum inline size of the card. Defaults to 280px, overridden per size.                                                                                                    |
| `--swc-card-base-border-radius`            | Corner radius of the card. Defaults to the extra-large corner-radius token, overridden per size.                                                                            |
| `--swc-card-base-box-shadow`               | Box shadow (elevation) of the card. Defaults to the emphasized drop-shadow token; overridden by the tertiary variant, selectable focus, and title-as-link/selectable hover. |
| `--swc-card-base-background-color`         | Background color of the card. Defaults to the layer-2 background token; overridden by the secondary, tertiary, and quiet variants.                                          |
| `--swc-card-base-preview-aspect-ratio`     | Aspect ratio of the preview slot. Defaults to 3/2.                                                                                                                          |
| `--swc-card-base-title-font-size`          | Font size of the title slot. Defaults to the medium font-size token, overridden per size.                                                                                   |
| `--swc-card-base-title-line-height`        | Line height of the title slot. Defaults to the medium line-height token, overridden per size.                                                                               |
| `--swc-card-base-description-font-size`    | Font size of the description slot and default slot content. Defaults to a smaller font-size token, overridden per size.                                                     |
| `--swc-card-base-action-component-height`  | Height used to vertically balance slotted actions content. Defaults to the smallest component-height token, overridden per size.                                            |
| `--swc-card-base-content-header-gap`       | Column gap between the title and actions slots. Defaults to the medium base-gap token, overridden per size.                                                                 |
| `--swc-card-base-content-padding`          | Padding of the content region. Defaults to the medium container-padding token; overridden by density.                                                                       |
| `--swc-card-base-content-padding-regular`  | Content padding used at the default (regular) density, per size.                                                                                                            |
| `--swc-card-base-content-padding-compact`  | Content padding used at compact density, per size.                                                                                                                          |
| `--swc-card-base-content-padding-spacious` | Content padding used at spacious density, per size.                                                                                                                         |