lab components / Visuals

Illustration

Illustrations visually enhance content and concepts, creating engaging experiences.

Purpose Examples Sizes Decorative Properties Guidelines

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

Looking for a specific illustration? Visit the Illustrations Overview page for a complete overview of all available illustrations.

import { Illustration } from "@siteimprove/fancylab";

#Purpose

Illustrations are valuable assets when used intentionally. They should be clear, relevant, and enhance the user's experience, not detract from it.

Illustrations can:

Enhance Understanding: Clarify complex concepts, processes, or data.
Create Emotional Connection: Evoke specific moods, feelings, or brand personality.
Add Visual Interest: Break up text-heavy layouts and guide the user's eye.
Provide Visual Cues: Direct attention, suggest actions, or enhance navigation.

#Examples

CodeHTML output

<Illustration src={IllustrationSuccess} alt="Accessibility illustration" />

#Sizes

Illustrations can be used in various sizes to fulfill different purposes:

xSmall / Small(Icons/ pictorgrams): Used for visual cues, actions, or within text.
Medium(Supporting): Reinforce content within sections, cards, or lists.
Large (Hero/Header): Introduce sections, create a visual anchor, or stand alone.

CodeHTML output

<Illustration
	src={IllustrationSuccess}
	size={{ width: 32, height: 32 }}
	alt="Illustration with custom size"
/>
<Illustration src={IllustrationSuccess} size="small" alt="Small size illustration" />
<Illustration src={IllustrationSuccess} size="medium" alt="Medium size illustration" />
<Illustration src={IllustrationSuccess} size="large" alt="Large size illustration" />

#Decorative

Decorative illustrations are purely aesthetic and do not convey essential information. They should be used sparingly to avoid clutter and maintain visual hierarchy.

CodeHTML output

<Illustration src={IllustrationSuccess} decorative />

#Properties

CodePropsHTML output

Property	Description	Defined	Value
srcRequired	`string`The illustration image source (base64, SVG, URL, or file path)	YesNo
sizeOptional	`"large" \| "medium" \| "small" \| object`Controls the illustration size - defaults to medium	YesNo
altOptional	`string`Meaningful alt text that explains the illustration	YesNo
decorativeOptional	`boolean`If true, the illustration doesn’t need an alt text	YesNo	truefalse
data-observe-keyOptional	`string`Unique string, used by external script e.g. for event tracking	YesNo
classNameOptional	`string`Custom className that's applied to the outermost element (only intended for special cases)	YesNo
styleOptional	`object`Style object to apply custom inline styles (only intended for special cases)	YesNo
tabIndexOptional	`number`Tab index of the outermost HTML element of the component	YesNo
onKeyDownOptional	`function`Callback for onKeyDown event	YesNo
onMouseDownOptional	`function`Callback for onMouseDown event	YesNo
onMouseEnterOptional	`function`Callback for onMouseEnter event	YesNo
onMouseLeaveOptional	`function`Callback for onMouseLeave event	YesNo
onFocusOptional	`function`Callback for onFocus event	YesNo
onBlurOptional	`function`Callback for onBlur event	YesNo

Guiding Users: Simplify complex processes or abstract concepts with visual walkthroughs, step-by-step guides, or diagrams.
Providing Context: Enhance understanding and clarify information by adding visual elements to text-heavy content. Use illustrations to demonstrate the purpose of a feature or the benefits of using a product.

#Placement

Illustration is typically used in the following places:

Alongside text: To complement written content or show as quick-link items (e.g SEO overview).
Within cards: To provide visual context. (e.g Empty state )

#Style

Siteimprove Design System: Adhere to Siteimprove's guidelines for color, typography, and spacing. If you are not using a component from Fancy, match the styling of your Illustration to existing components for visual consistency.
Align illustration style with the overall message and brand. If you need customised illustration in your project, please fill the form, and send the request to marketing.
Choose illustrations that directly relate to the content.
Ensure illustrations don't overshadow essential content.
Be mindful of cultural interpretations of visual elements.
Illustrations should complement, not duplicate, written information.
Too many illustrations can be distracting and overwhelming.
Illustrations should never hinder the user's ability to interact with the interface.