> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/illustration.md).

# Illustration

<figure><img src="/files/Hf0OtBBCq2ROopu5AcuL" alt="" width="375"><figcaption></figcaption></figure>

***

## Overview

The Illustration component displays a predefined Salesforce Lightning Design System illustration alongside optional title and descriptive text. Use it to communicate empty states, errors, success messages, or onboarding steps in a visually engaging way — without needing custom images.

## Configuration

To configure it, click the component on the Flow screen. The Edit Illustration Component panel opens on the right with two tabs: Properties and Style. The sections below mirror the Properties tab.

### Properties

**Variant** — the illustration graphic to display. Choose from a large set of SLDS illustrations including empty states, error states, and themed scenes:

| Category             | Examples                                                                                                              |
| -------------------- | --------------------------------------------------------------------------------------------------------------------- |
| **Empty / no data**  | No Events, No Task, No Content, No Results Filter, No Results Search                                                  |
| **Error states**     | No Access, No Connection, Error App Connection, Error Connection Issue, Error Recoverable, Error Unrecoverable        |
| **Themed scenes**    | Going Camping, Desert, Open Road, Lake Mountain, Gone Fishing, Fishing Deals                                          |
| **System / process** | Maintenance, Maintenance Planned, Maintenance Unplanned, Setup, Walkthrough Not Available, Not Available In Lightning |
| **Success / action** | Preview, Research, Success Assigned, Success New, Success Self Assigned                                               |
| **Access**           | Access Deleted, Access Limit, Access Request                                                                          |
| **Commerce**         | Cart No Items                                                                                                         |
| **Text only**        | Text Only (no graphic, just title and content)                                                                        |

**Size** — controls the size of the illustration graphic: **Small** or **Large**.

**Title** — bold text displayed below the illustration graphic.

**Content** — descriptive text displayed below the title. Supports rich text content for guidance or contextual information.

**Alternative Text** — accessible description of the illustration for screen readers.

## Styling

The **Style** tab gives you fine-grained control over the Illustration's appearance. Configure it from the **Style** tab of the Edit Illustration panel.

{% tabs %}
{% tab title="Margin" %}
Controls outer spacing.

* **Top:** Space above the component.
* **Right:** Space to the right of the component.
* **Bottom:** Space below the component.
* **Left:** Space to the left of the component.
  {% endtab %}

{% tab title="Padding" %}
Controls inner spacing.

* **Top:** Inner space above the content.
* **Right:** Inner space to the right of the content.
* **Bottom:** Inner space below the content.
* **Left:** Inner space to the left of the content.
  {% endtab %}

{% tab title="Size" %}
Controls dimensions.

* **Width:** Horizontal size of the component.
* **Height:** Vertical size of the component.
* **Min Width:** Minimum horizontal size.
* **Max Width:** Maximum horizontal size.
* **Min Height:** Minimum vertical size.
* **Max Height:** Maximum vertical size.
* **Overflow:** How content behaves when it exceeds the component's bounds.
  {% endtab %}

{% tab title="Border" %}
Customizes the border.

* **Color:** Border color.
* **Size:** Border thickness.
* **Style:** Border style (solid, dashed, etc.).
* **Radius:** Rounding of the corners.
  {% endtab %}

{% tab title="Background" %}
Sets the background.

* **Color:** Background fill color.
* **Linear Gradient:** Gradient applied to the background.
  {% endtab %}

{% tab title="Title" %}
Styles the title text displayed below the illustration graphic.

* **Color:** Title text color.
* **Font Size:** Title text size.
* **Font Style:** Title text style (normal or italic).
* **Font Weight:** Title text weight (e.g., bold).
  {% endtab %}

{% tab title="Content" %}
Styles the descriptive content text displayed below the title.

* **Color:** Content text color.
* **Font Size:** Content text size.
* **Font Style:** Content text style (normal or italic).
* **Font Weight:** Content text weight (e.g., bold).
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/flow/flow-components/illustration.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.