Illustration
Illustrations display static images such as branding, icons, or informative visuals. These elements appear in screens where visual context or identity is important. Illustrations do not support interaction or events.
Properties
| Property | Value | Description |
|---|---|---|
| Type | Illustration | UI component type |
| Group | Image | Belongs to the "Image" group |
| Identifier | 25 | Unique element ID |
| Preview | ✓ | See image preview above |
| Value | Y | Contains a visual value (e.g. logo) |
| Read-only | Y | Does not support interaction |
| Text, Icon | Y | May include label or visual icon in some cases |
| Event | Y | Triggers an event if explicitly wired (rare) |
| Mandatory | Optional unless defined in logic | |
| Children | No nested children | |
| Shade | No shade property | |
| List | Not a list container | |
| Min | No minimum constraint | |
| Max | No maximum constraint |
Usage Example
<Illustration src="/assets/logo-airdr.svg" alt="Air Doctor Logo" />
SDK Integration
The Reset Password screen uses this element. It appears alongside the SDK method:
Method: /account/reset-password/request
Initiates password recovery. Appears after selecting Forgot password? and includes static visuals such as the logo.
Example UI Placement
| Level | ID | Type | Value | Description |
|---|---|---|---|---|
1 | logo | Illustration | AirDr Logo | Branding displayed at top |
Notes
- Use illustrations for non-interactive branding or visual support.
- Ensure proper
alttext for accessibility. - Avoid using illustration elements for dynamic or clickable content.