Illustration

Utility component for rendering Bedrock illustrations.

AccessibilityPermalink to: Accessibility

Illustration has role="presentation" to explicitly mark it as purely decorative, preventing assistive technologies from misinterpreting it as conveying meaningful information.

ExamplesPermalink to: Examples

IllustrationPermalink to: Illustration

Use the name prop to render an illustration (List of illustrations: email illustrations, empty-state illustrations and spot illustrations).

import { Illustration } from "@peakon/bedrock/react/assets/Illustration";

function Snippet() {
  return <Illustration name="spot-acknowledgement-great-idea" />;
}

FormatsPermalink to: Formats

Illustrations can be rendered in different formats: webp (default), svg or png, via the format prop.

import { Illustration } from "@peakon/bedrock/react/assets/Illustration";

function Snippet() {
  return <Illustration name="spot-acknowledgement-great-idea" format="png" />;
}

Width and heightPermalink to: Width and height

Use the native HTML Image width and height attributes to set the size of the Graphic Icon.

import { Illustration } from "@peakon/bedrock/react/assets/Illustration";

function Snippet() {
  return <Illustration name="spot-acknowledgement-great-idea" width="200" />;
}

Props TablePermalink to: Props Table

GraphicIconPermalink to: GraphicIcon

Props extend from HTML Image Element(external link), with the omission of role and style

RelatedPermalink to: Related

• List of empty state illustration
• List of email illustrations
• List of spot illustrations