# 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="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fm2Isr2Z6DdBP4sEECKKD%2F2025-03-16_20-46-05.png?alt=media&#x26;token=f056805c-40ea-4993-a8f0-d3c99742e4de" 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.