# swc-thumbnail

Wraps a slotted image, such as an asset preview or a layer in a layers panel, in a consistent checkerboard-backed frame.

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

## Attributes

| Name         | Type            | Default     | Description                                                                                                                                                        |
| ------------ | --------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `size`       | `ThumbnailSize` | `500`       | The size of the thumbnail. Invalid values fall back to the default (500).                                                                                          |
| `fit`        | `ThumbnailFit`  | `'contain'` | How the slotted image fits within the thumbnail's bounds. Invalid values fall back to the default (`'contain'`).                                                   |
| `decorative` | `boolean`       | `false`     | Marks the thumbnail as decorative, hiding it (and its slotted image) from assistive technology via `aria-hidden`, and gives the slotted image `alt=""` when unset. |

## Slots

| Name        | Description                                                                   |
| ----------- | ----------------------------------------------------------------------------- |
| `(default)` | Image element to present in the thumbnail. Other slotted elements are hidden. |

## CSS Custom Properties

| Name                   | Description                                                                                    |
| ---------------------- | ---------------------------------------------------------------------------------------------- |
| `--swc-thumbnail-size` | Size (inline and block) of the thumbnail. Defaults to the token matching the `size` attribute. |