Components/Illustrated Message
fd-illustrated-message · 5 examples from SAP's documentation · Back to the gallery
About
Illustrated messages for SAP are a simple yet powerful way to engage users and add personality to the experience.
**Illustration** - \ **Illustration** - \
Large
The default and largest size variant, ideal for full-page empty states, onboarding screens, or error pages where maximum visual impact is needed.
Medium
A balanced size variant suitable for dialogs, panels, or section-level empty states. Apply the .fd-illustrated-message--medium modifier class.
Extra Small
A compact size designed for narrow panels, sidebars, or smaller dialog windows. Apply the .fd-illustrated-message--small modifier class.
Extra Small
The most compact illustrated version featuring a minimal icon and condensed spacing, ideal for inline messages, mobile interfaces, or narrow cards. Apply the .fd-illustrated-message--xsmall modifier class.
Base
Text-only variant without illustration, providing a minimal presentation for extremely constrained spaces. Apply the .fd-illustrated-message--base modifier class.