# swc-illustrated-message

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

## Attributes

| Name          | Type                            | Default      | Description             |
| ------------- | ------------------------------- | ------------ | ----------------------- |
| `size`        | `IllustratedMessageSize`        | `'m'`        | The size of the message |
| `orientation` | `IllustratedMessageOrientation` | `'vertical'` | The layout orientation  |

## Slots

| Name          | Description                                                                                                                                               |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `(default)`   | Decorative or informative SVG illustration                                                                                                                |
| `heading`     | Optional heading; when present, must be a single h2–h6 element. Both constraints (allowed h2–h6 children and a single heading) are validated in dev mode. |
| `description` | Supporting description text                                                                                                                               |
| `actions`     | Optional action controls displayed below the description, typically a button or button group. Receives `size` automatically from the illustrated message. |

## CSS Custom Properties

| Name                                                 | Description                                                                                                               |
| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| `--swc-illustrated-message-max-inline-size`          | Maximum inline size of the message.                                                                                       |
| `--swc-illustrated-message-illustration-size`        | Inline and block size of the illustration when no directional override is set.                                            |
| `--swc-illustrated-message-illustration-inline-size` | Inline size override for the illustration.                                                                                |
| `--swc-illustrated-message-illustration-block-size`  | Block size override for the illustration.                                                                                 |
| `--swc-illustrated-message-illustration-color`       | Color of the illustration.                                                                                                |
| `--swc-illustrated-message-illustration-to-content`  | Spacing between the illustration and the heading/description content.                                                     |
| `--swc-illustrated-message-heading-font-size`        | Font size of the heading.                                                                                                 |
| `--swc-illustrated-message-heading-line-height`      | Line height of the heading.                                                                                               |
| `--swc-illustrated-message-description-font-size`    | Font size of the description.                                                                                             |
| `--swc-illustrated-message-description-line-height`  | Line height of the description.                                                                                           |
| `--swc-illustrated-message-max-inline-size`          | Maximum inline size of the component.                                                                                     |
| `--swc-illustrated-message-illustration-size`        | Square size of the illustration (width and height). Defaults to 96px for `size="s"` and `size="m"`, 160px for `size="l"`. |
| `--swc-illustrated-message-illustration-inline-size` | Illustration inline size override. Falls back to `--swc-illustrated-message-illustration-size`.                           |
| `--swc-illustrated-message-illustration-block-size`  | Illustration block size override. Falls back to `--swc-illustrated-message-illustration-size`.                            |
| `--swc-illustrated-message-illustration-color`       | Color applied to the SVG illustration via `currentcolor`.                                                                 |
| `--swc-illustrated-message-illustration-to-content`  | Gap between the illustration and the heading/description area.                                                            |
| `--swc-illustrated-message-heading-font-size`        | Font size of the heading.                                                                                                 |
| `--swc-illustrated-message-heading-line-height`      | Line height of the heading.                                                                                               |
| `--swc-illustrated-message-description-font-size`    | Font size of the description.                                                                                             |
| `--swc-illustrated-message-description-line-height`  | Line height of the description.                                                                                           |