#Overview

To make our stores look more lively and less sterile, illustrations are used. Illustrations are similar to icons, but we never inline them with our HTML.

For a more in-depth explanation about illustrations, please refer to Images And Illustrations.

<ReturnProductStillNewIllustration ariaHidden={true} ratio="2/1" />

import { EmptyStateIllustration } from "@blocks/illustrations/EmptyStateIllustration";

export const DecorativeIllustration = () => (
  <EmptyStateIllustration ariaHidden />
);

export const IllustrationWithContent = () => (
  <EmptyStateIllustration ariaLabel="Add content" />
);

#Resizing

To resize the illustration, just wrap it with the styled helper.

import { EmptyStateIllustration } from "@blocks/illustrations/EmptyStateIllustration";
import { styled } from "next-yak";

export const StyledEmptyStateIllustration = styled(EmptyStateIllustration)`
  width: 100%;

  ${screenRangeQueries.desktopWidescreen} {
    width: 600px;
  }
`;

#Responsive Behavior

Certain illustrations vary between the xs, sm, and md breakpoints. The illustration component automatically manages these variations.

#Caution, CDN Pitfall!

If an illustration won't load on your local dev environment or on a preview deployment, it's probably because the illustration is not yet available on the CDN. Merge the PR to upload new graphics to the Akamai CDN.

#Explorer