# Illustration

## Overview

_[Design to fill]_

- **When to use**: _[Design to fill]_
- **When not to use**: _[Design to fill]_

## Anatomy

_[Design to fill]_

## Props / API

### `Illustration`

| Prop   | Type               | Default | Description                           |
| ------ | ------------------ | ------- | ------------------------------------- |
| `name` | `IllustrationName` | -       | The illustration to render. Required. |

Extends `HTMLAttributes<HTMLDivElement>`. All standard attributes are forwarded to the wrapping `<div>` via `...rest`.

## Code examples

```tsx
import { Illustration } from "@mylighthouse/prism-react";

export default function IllustrationExample(): React.JSX.Element {
  return <Illustration name="empty-state" />;
}
```

## A11y intent

_[Design to fill]_

- The illustration renders an inline SVG inside a `<div>`, it carries no accessible name of its own.
- Illustrations are usually decorative and accompany a heading or body text that carries the meaning; in that case add `aria-hidden="true"` so it is skipped by assistive technology.
- When an illustration conveys information not available in nearby text, give it an accessible name via `role="img"` and `aria-label`.

## Cross-references

- **[Icon](./icon.md)**: small UI glyphs with size and color variants.