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).
Illustration
The Avonni Illustration displays graphic illustrations to add visual interest and clarify concepts within user interfaces
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 Preview, No Results Filter, No Results Search, No Results Unknown
Error states
No Access, No Access 2, 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, Page Not Available
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.
Advanced Options
Alternative Text — alternative text used to describe the component 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.
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.
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.
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.
Customizes the border.
Color: Border color.
Size: Border thickness.
Style: Border style (solid, dashed, etc.).
Radius: Rounding of the corners.
Sets the background.
Color: Background fill color.
Linear Gradient: Gradient applied to the background.
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).
Last updated
Was this helpful?