SLDS Illustration Lightning Web Component

The SLDS Illustration component blueprint as a Lightning Web Component. Also usable in Lightning App Builder.

Installation

Deploy the illustration and illustration-image components into your org manually or click the button below!

Usage

• The illustration component displays an Illustration that adheres to the blueprint laid out in SLDS. It depends on illustration-image.
• The illustration-image component displays only an Illustration image with no text.

Note that illustration has size constraints placed on it by SLDS while illustration-image will fill the width of its container.

Image Options

Images are specified via an identifier in the format category:description, where category and description are the snake_case form of the categories and image labels given on the SLDS Illustration page. For an explicit list of all identifiers, see illustrationImage/images/index.js

See the SLDS Illustration page for what each identifier renders as well as when to use each image.

Examples

Base

<c-illustration
  heading="Lorem ipsum dolor"
  image-name="custom:fishing_deals"
></c-illustration>

With Message Body

<c-illustration
  heading="Lorem ipsum dolor"
  message-body="Lorem ipsum dolor sit amet, consectetur"
  image-name="custom:fishing_deals"
></c-illustration>

Large

<c-illustration
  heading="Lorem ipsum dolor"
  message-body="Lorem ipsum dolor sit amet, consectetur"
  image-name="custom:fishing_deals"
  image-size="large"
></c-illustration>

With Call to Action

<c-illustration heading="Lorem ipsum dolor" image-name="custom:no_task">
  <p slot="messageBody" class="slds-text-body_regular">
    Lorem ipsum dolor sit amet, consectetur&nbsp;
    <a href="#">Learn More</a>
  </p>
</c-illustration>

Text Only

<c-illustration
  heading="Lorem ipsum dolor"
  message-body="Lorem ipsum dolor sit amet, consectetur"
  text-only
></c-illustration>