# Illustration

## Overview

The Illustration component is a *visual* element. It's primarily used to enhance the user interface and communicate information in a visually engaging way. Avonni provides a library of built-in illustrations from which you can choose.

### Use Cases

* Empty States: Show an illustration when a Data Table or List has no data to display (e.g., an illustration of an empty inbox with the text "No messages yet").
* Success/Confirmation Messages: Display an illustration to confirm a successful action (e.g., a checkmark illustration after a record is saved).
* Error/Warning Messages: Use an illustration to represent an error or warning condition visually.
* Visual Breaks: Add visual interest and break up large blocks of text or data.
* Branding: Use illustrations that align with your brand's visual style.
* Page not found

## Setting Up your Illustration

### Properties

#### API Name

A unique identifier for the component within your Dynamic Component.

#### Title

The main title text displayed as part of the illustration. This can be static text or bound to a dynamic value (Variable, Formula, Component Attribute).

#### Content

Additional text content displayed below the title, often used for a description or message. This can also be static or dynamic.

#### Variant

Selects the specific illustration to display. Avonni provides a set of pre-designed illustrations, each with a unique name (e.g., "desert", "empty", "no\_access", etc.). Refer to the Avonni documentation for a complete list of available variants and their corresponding images. The available options are *not* free-form text; you must choose from the provided list.

#### Size

Controls the size of the illustration. Common options include:

* Small
* Medium
* Large
* (Other size options might be available, depending on the Avonni version).

#### Visible

It controls visibility and supports dynamic show and hide.

## Examples

### Example 1: Empty State Illustration

1. Add an Illustration component to your canvas.
2. Set the `Variant` to "No Content" (or a similar variant appropriate for an empty state).
3. Set the `Title` to "No Records Found".
4. Set the `Content` to "There are no records to display at this time."
5. Set the Size to `medium`.
6. Configure the `Visible` property of the Illustration component to be dynamically controlled (e.g., show the illustration only if a Data Table has no rows).

<figure><img src="/files/D87NHRPY6y6h0hCxybwH" alt=""><figcaption></figcaption></figure>

## Important Considerations

* **Variant Selection**: Choose a `Variant` that is appropriate for the message you want to convey. Refer to the Avonni documentation for visual examples of each variant.
* **Title and Content**: Use the `Title` and `Content` properties to provide clear and concise messages to the user.
* **Dynamic Text**: You can use Variables, Formulas, and Component Attributes to make the `Title` and `Content` dynamic.
* **Accessibility**: Consider users with visual impairments. While illustrations can be helpful, ensure that the essential information is also conveyed through text (e.g., using the `Title` and `Content` properties effectively).
* **Size**: Choose an appropriate size for the illustration based on its context and the surrounding components.

## In Summary

The Illustration component lets you add an image to enhance your Dynamic Component visuals. Use case for the illustration components includes showing an empty state, a success message or a not found information.


---

# Agent Instructions: 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:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/illustration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.