Illustration

Illustration is a component that helps convey complex ideas in a graphic way.

Table of contents

• How to use Illustration
• Code examples

How to use Illustration

Use Illustration when your application needs a graphic enhancement / aid. It can be used as a standalone component or alongside text.

Code examples

<>
  <Illustration illustration="Archive" />
</>
<>
  <Illustration illustration="Archive" />
</>
Hide source

Illustration with accompanying text

Image
<>
  <Flex
    padding="spacingS"
    marginRight="spacingM"
    alignItems="center"
    justifyContent="flex-start"
    flexGrow={0}
  >
    <Flex marginRight="spacingS">
      <Illustration illustration="Image" />
    </Flex>
    <Paragraph>Image</Paragraph>
  </Flex>
</>
<>
  <Flex
    padding="spacingS"
    marginRight="spacingM"
    alignItems="center"
    justifyContent="flex-start"
    flexGrow={0}
  >
    <Flex marginRight="spacingS">
      <Illustration illustration="Image" />
    </Flex>
    <Paragraph>Image</Paragraph>
  </Flex>
</>
Hide source