Illustration
The Illustration component displays SVG illustrations with configurable sizes and color schemes, supporting both LTR/RTL layouts.
Basic usage
The Illustration component requires an SVG name and supports size and theme customization.
Component anatomy
Size
Control illustration dimensions using the size Input with three options:
- SM: 204px height
- MD: 296px height (default)
- LG: 448px height
Width scales proportionally while maintaining aspect ratio.
Color Scheme
The component supports six color categories:
- Neutral Primary
- Neutral Secondary
- Neutral Tertiary
- Neutral Quaternary
- Neutral Quinary
- Accent
Colors automatically adapt to light/dark mode.
RTL Support
Illustrations automatically mirror in RTL layouts when RTL variants are available. Add "_rtl" suffix to illustration name for RTL-specific versions.
Negative Theme
Enable negative variant using the negative Input for dark backgrounds. This inverts the color palette while maintaining proper contrast.
Responsive Behavior
Illustrations maintain aspect ratio and automatically scale to fit their container width while respecting maximum dimensions.
Accessibility
Non-interactive Nature
Illustrations are non-interactive by default (inert attribute), serving as decorative elements.
Color Contrast
- Maintains proper contrast in all color schemes
- Supports dark mode adaptation
- Provides negative variants
- Ensures readability in all contexts
Best Practices for Developers
Size Selection DEMO HERE
Color Usage DEMO HERE
Responsive Implementation DEMO HERE