https://github.com/kacrouse/lwc-illustration

The SLDS Illustration component as an App Builder-ready Lightning Web Component.
https://github.com/kacrouse/lwc-illustration

lwc salesforce slds

Last synced: 5 days ago
JSON representation

The SLDS Illustration component as an App Builder-ready Lightning Web Component.

• Host: GitHub
• URL: https://github.com/kacrouse/lwc-illustration
• Owner: kacrouse
• License: mit
• Created: 2020-06-23T22:53:48.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-06-24T21:09:06.000Z (over 4 years ago)
• Last Synced: 2024-08-02T12:21:28.074Z (3 months ago)
• Topics: lwc, salesforce, slds
• Language: HTML
• Homepage:
• Size: 302 KB
• Stars: 14
• Watchers: 1
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-lwc - SLDS Illustration Cmp

README

        
# SLDS Illustration Lightning Web Component

The [SLDS Illustration component blueprint](https://www.lightningdesignsystem.com/components/illustration/) 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](https://en.wikipedia.org/wiki/Snake_case) form of the categories and image labels given on the [SLDS Illustration page](https://www.lightningdesignsystem.com/components/illustration/). For an explicit list of all identifiers, see [illustrationImage/images/index.js](./force-app/main/default/lwc/illustrationImage/images/index.js#L24)

See the [SLDS Illustration page](https://www.lightningdesignsystem.com/components/illustration/) for what each identifier renders as well as when to use each image.

## Examples

### [Base](https://www.lightningdesignsystem.com/components/illustration/#Base)

```html

```



### [With Message Body](https://www.lightningdesignsystem.com/components/illustration/#With-Message-Body)

```html

```



### [Large](https://www.lightningdesignsystem.com/components/illustration/#Large-Illustrations)

```html

```



### [With Call to Action](https://www.lightningdesignsystem.com/components/illustration/#With-Call-to-Action)

```html

  


    Lorem ipsum dolor sit amet, consectetur 

    Learn More

  


```



### [Text Only](https://www.lightningdesignsystem.com/components/illustration/#Text-Only)

```html

```