## Overview

Illustrations are visual elements that can be paired with written messages, to help users understand a concept more quickly and make complex ideas more relatable.

They are often based on EDS icons, but include additional details—making them perfect for spaces that are too large for an icon. Illustrations are always in neutral colours.

<Box
  as="img"
  marginBottom="small"
  src="/images/illustration-overview.png"
  alt="Showing few examples of available illustrations"
/>

## Spot illustrations

ELMO's spot illustrations are always in neutral colours. They are often based on EDS icons, but include additional details — perfect for spaces that are too large for an icon.

_Click on an illustration below to copy the `<SpotIllustrationName />` to your clipboard._

<CopyCardGrid type="spot-illustrations" />

### Size

Spot illustrations are available in `small` (default) and `medium` sizes.

<Notice>
  <Text>
    If the small illustration size is still not small enough for your use case, consider using an
    [icon](/packages/icon/).
  </Text>
</Notice>

```tsx live
<Flex gap="medium">
  <DocumentSpot />
  <DocumentSpot size="medium" />
</Flex>
```

### Background

Illustrations can be used with or without a background. Use the `backgroundCircle` prop to make the spot illustration pop.

`With background`: The circle is used as the background, which using a `<informativeSubtle>` background color.

`Without background`: In scenarios where a background may not be suitable, opting for illustrations without a background is preferred. They can be used as decoration with other elements.

<Box
  as="img"
  marginBottom="small"
  src="/images/illustration-spot-illustration-background-circle.png"
  alt="Example of using a spot illustration for each card in a layout without a background circle, and an example of using a single spot illustration in an empty state with a background circle."
/>

### Usage examples

It can be used on the empty state screen, welcoming users when they access the page for the first time.

<Box
  as="img"
  marginBottom="small"
  src="/images/illustration-usage-examples-empty.png"
  alt="Example of using a single spot illustration in an empty state when no data exists yet."
/>

Or, it can be used as the decorative element on the information page that helps user understand the message easily.

<Box
  as="img"
  marginBottom="small"
  src="/images/illustration-usage-examples-decorations.png"
  alt="Example as the decorative element on the information page."
/>

<Box
  as="img"
  marginBottom="small"
  src="/images/illustration-usage-examples-decorations-1.png"
  alt="Example of using a multiple spot illustrations in a dropdown menu on add widget flow"
/>

Below are things to consider or avoid when using illustrations.

<DosAndDonts>
  <Do>
    <Flex justifyContent="center">
      <Box
        as="img"
        src="/images/illustration-usage-examples-do.png"
        alt="Visual example showing spot illustrations in correct neutral colour."
        width="14.5rem"
      />
    </Flex>
  </Do>
  <Dont>
    <Flex justifyContent="center">
      <Box
        as="img"
        src="/images/illustration-usage-examples-dont.png"
        alt="Visual example showing spot illustration in a custom orange colour."
        width="14.5rem"
      />
    </Flex>
  </Dont>
</DosAndDonts>

NOTE: Do not distort, combine, add colors to, or modify existing illustrations in any way.

Illustrations bring a visual voice to products, enriching information and enhancing user experiences.

Illustration

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources

EmptyFolderSpot