sp-illustrated-message

NPM 1.7.0

View Storybook

Try it on Stackblitz
Overview API Changelog

Overview

An <sp-illustrated-message> displays an outline illustration and a message, usually in an empty state or on an error page. It is also used inside a DropZone.

Usage

See it on NPM! How big is this package in your project? Try it on Stackblitz

yarn add @spectrum-web-components/illustrated-message

Import the side effectful registration of <sp-illustrated-message> via:

import '@spectrum-web-components/illustrated-message/sp-illustrated-message.js';

When looking to leverage the IllustratedMessage base class as a type and/or for extension purposes, do so via:

import { IllustratedMessage } from '@spectrum-web-components/illustrated-message';

Anatomy

An illustrated message consists of the following parts:

  • An outline illustration that supports the messaging. The illustrated message accepts an <svg> into its default slot. This SVG is displayed as an illustration above the heading and description.
  • A required heading that appears in bold below the illustration, using a few words to convey what a user needs to do or know about.
  • An optional body area that elaborates on the heading and offers more information about how to complete the interaction, including buttons or links to show the user what to do next.

Examples

Call to action with link 
<sp-illustrated-message heading="Drag and Drop Your File">
    <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 200 100"
        width="200"
        height="100"
    >
        <defs>
            <style>
                .cls-1,
                .cls-2 {
                    fill: none;
                    stroke-linecap: round;
                    stroke-linejoin: round;
                }
                .cls-1 {
                    stroke-width: 3px;
                }
                .cls-2 {
                    stroke-width: 2px;
                }
            </style>
        </defs>
        <path
            class="cls-1"
            d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"
        ></path>
        <line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"></line>
        <path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"></path>
        <path
            class="cls-1"
            d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"
        ></path>
        <line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"></line>
        <path
            class="cls-2"
            d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"
        ></path>
        <path
            class="cls-2"
            d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"
        ></path>
        <path
            class="cls-2"
            d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"
        ></path>
        <path
            class="cls-1"
            d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"
        ></path>
        <rect
            class="cls-1"
            x="1.5"
            y="34.5"
            width="58"
            height="39"
            rx="2"
            ry="2"
        ></rect>
    </svg>
    <p slot="description">
        <sp-link href="#">Select a file</sp-link>
        from your computer.
    </p>
</sp-illustrated-message>
 Call to action with buttons 
<sp-illustrated-message heading="Error 404: Page not found">
    <div slot="description">
        <p>
            This page isn't available. Try checking the URL or visit a different
            page.
        </p>
        <sp-button-group style="--mod-buttongroup-justify-content: center;">
            <sp-button treatment="outline" variant="primary">Back</sp-button>
            <sp-button treatment="fill" variant="primary">Refresh</sp-button>
        </sp-button-group>
    </div>
    <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 150 103"
        width="150"
        height="103"
    >
        <path
            d="M133.7,8.5h-118c-1.9,0-3.5,1.6-3.5,3.5v27c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V23.5h119V92c0,0.3-0.2,0.5-0.5,0.5h-118c-0.3,0-0.5-0.2-0.5-0.5V69c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v23c0,1.9,1.6,3.5,3.5,3.5h118c1.9,0,3.5-1.6,3.5-3.5V12C137.2,10.1,135.6,8.5,133.7,8.5z M15.2,21.5V12c0-0.3,0.2-0.5,0.5-0.5h118c0.3,0,0.5,0.2,0.5,0.5v9.5H15.2z M32.6,16.5c0,0.6-0.4,1-1,1h-10c-0.6,0-1-0.4-1-1s0.4-1,1-1h10C32.2,15.5,32.6,15.9,32.6,16.5z M13.6,56.1l-8.6,8.5C4.8,65,4.4,65.1,4,65.1c-0.4,0-0.8-0.1-1.1-0.4c-0.6-0.6-0.6-1.5,0-2.1l8.6-8.5l-8.6-8.5c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0l8.6,8.5l8.6-8.5c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L15.8,54l8.6,8.5c0.6,0.6,0.6,1.5,0,2.1c-0.3,0.3-0.7,0.4-1.1,0.4c-0.4,0-0.8-0.1-1.1-0.4L13.6,56.1z"
        ></path>
    </svg>
</sp-illustrated-message>
 Informative 
<sp-illustrated-message
    heading="Error 404: Page not found"
    description="This page isn't available. Try checking the URL or visit a different page."
>
    <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 150 103"
        width="150"
        height="103"
        viewBox="0 0 150 103"
    >
        <path
            d="M133.7,8.5h-118c-1.9,0-3.5,1.6-3.5,3.5v27c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V23.5h119V92c0,0.3-0.2,0.5-0.5,0.5h-118c-0.3,0-0.5-0.2-0.5-0.5V69c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v23c0,1.9,1.6,3.5,3.5,3.5h118c1.9,0,3.5-1.6,3.5-3.5V12C137.2,10.1,135.6,8.5,133.7,8.5z M15.2,21.5V12c0-0.3,0.2-0.5,0.5-0.5h118c0.3,0,0.5,0.2,0.5,0.5v9.5H15.2z M32.6,16.5c0,0.6-0.4,1-1,1h-10c-0.6,0-1-0.4-1-1s0.4-1,1-1h10C32.2,15.5,32.6,15.9,32.6,16.5z M13.6,56.1l-8.6,8.5C4.8,65,4.4,65.1,4,65.1c-0.4,0-0.8-0.1-1.1-0.4c-0.6-0.6-0.6-1.5,0-2.1l8.6-8.5l-8.6-8.5c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0l8.6,8.5l8.6-8.5c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L15.8,54l8.6,8.5c0.6,0.6,0.6,1.5,0,2.1c-0.3,0.3-0.7,0.4-1.1,0.4c-0.4,0-0.8-0.1-1.1-0.4L13.6,56.1z"
        ></path>
    </svg>
</sp-illustrated-message>

Accessibility

The <sp-illustrated-message> component provides a semantic structure for displaying illustrated content with proper heading hierarchy. However, there are several considerations to keep in mind for accessibility:

  • Always include a clear, standalone heading. All illustrated messages must include a heading or title. This heading communicates the result of why the UI is appearing in the way that it is. If included, the description elaborates on the heading and offers more information.
  • Ensure that text and image work together. The illustration within an illustrated message adds value to the language that it’s paired with, and vice versa. An illustration’s meaning should be readily clear, contextual, and relevant to the overall message described in the text.
  • Provide actionable solutions. Offer an actionable solution when possible by using links or buttons.
  • Make error codes meaningful and contextual. If an illustrated message is for an error state, use the heading to summarize the error. Only include an error code or other technical information if it’s useful and relevant for the user. Put the error code either at the beginning of the heading using a colon, or at the end of the message using parentheses; don’t hide it in the middle of the heading or bury it in the description.

Patch Changes

  • Updated dependencies [1126cf2]:
    • @spectrum-web-components/styles@1.7.0
    • @spectrum-web-components/base@1.7.0

1.6.0

Patch Changes

  • #5349 a9727d2 Thanks @renovate! - Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

  • Updated dependencies [9e15a66, a9727d2]:

    • @spectrum-web-components/styles@1.6.0
    • @spectrum-web-components/base@1.6.0

1.5.0

Patch Changes

  • #5271 165a904 Thanks @renovate! - Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

  • Updated dependencies [165a904, 4e06533, fa4be70, daeb11f, 6c58f50, fa4be70]:

    • @spectrum-web-components/styles@1.5.0
    • @spectrum-web-components/base@1.5.0

1.4.0

Patch Changes

  • Updated dependencies [3cca7ea]:
    • @spectrum-web-components/styles@1.4.0
    • @spectrum-web-components/base@1.4.0

1.3.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.3.0
    • @spectrum-web-components/styles@1.3.0

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.2.0 (2025-02-27)

Note: Version bump only for package @spectrum-web-components/illustrated-message

1.1.2 (2025-02-12)

Note: Version bump only for package @spectrum-web-components/illustrated-message

1.1.1 (2025-01-29)

Note: Version bump only for package @spectrum-web-components/illustrated-message

1.1.0 (2025-01-29)

Bug Fixes

  • lock prerelease versions for Spectrum CSS (#5014) (8aa7734)

1.0.3 (2024-12-09)

Note: Version bump only for package @spectrum-web-components/illustrated-message

1.0.1 (2024-11-11)

Note: Version bump only for package @spectrum-web-components/illustrated-message

1.0.0 (2024-10-31)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.49.0 (2024-10-15)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.48.1 (2024-10-01)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.48.0 (2024-09-17)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.47.2 (2024-09-03)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.47.1 (2024-08-27)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.47.0 (2024-08-20)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.46.0 (2024-08-08)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.45.0 (2024-07-30)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.44.0 (2024-07-15)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.43.0 (2024-06-11)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.42.5 (2024-05-24)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.42.4 (2024-05-14)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.42.3 (2024-05-01)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.42.2 (2024-04-03)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.42.1 (2024-04-02)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.42.0 (2024-03-19)

Features

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.41.1 (2024-02-22)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.41.0 (2024-02-13)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.40.5 (2024-02-05)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.40.4 (2024-01-29)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.40.3 (2024-01-11)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.40.2 (2023-12-18)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.40.1 (2023-12-05)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.40.0 (2023-11-16)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.39.4 (2023-11-02)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.39.3 (2023-10-18)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.39.2 (2023-10-13)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.39.1 (2023-10-06)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.39.0 (2023-09-25)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.38.0 (2023-09-05)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.37.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.36.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.35.0 (2023-07-31)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.34.0 (2023-07-11)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.33.2 (2023-06-14)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.33.0 (2023-06-08)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.32.0 (2023-06-01)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.31.0 (2023-05-17)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.30.0 (2023-05-03)

Bug Fixes

  • correct @element jsDoc listing across library (c97a632)
  • illustrated-message: use accessibile tagnames (e47b469)
  • include "type" in package.json, generate custom-elements.json (1a8d716)
  • include default export in the "exports" fields (f32407d)
  • include the "types" entry in package.json files (b432f59)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • update side effect listings (8160d3a)
  • update to latest spectrum-css packages (a5ca19f)
  • use latest @spectrum-css/* versions (c35eb86)

Features

  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • illustrated-message: update spectrum css input (25c0545)
  • illustrated-message: use core tokens (5f34473)
  • include all Dev Mode files in side effects (f70817c)
  • leverage "exports" field in package.json (321abd7)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • styles: vend CSS literal versions of the typography system (6406c96)
  • update to Spectrum CSS v3.0.0 (e8b3d8f)
  • use latest exports specification (a7ecf4b)

Performance Improvements

  • use "sideEffects" listing in package.json (7271614)
  • use imported TypeScript helpers instead of inlining them (cc2bd0a)

Reverts

  • Revert "chore: release new versions" (a6d655d)

0.10.0 (2023-04-24)

Features

  • illustrated-message: use core tokens (5f34473)

0.9.14 (2023-04-05)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.9.13 (2023-03-22)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.9.12 (2023-03-08)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.9.11 (2023-02-08)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.9.10 (2023-01-23)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.9.9 (2023-01-09)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.9.8 (2022-12-08)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.9.7 (2022-11-21)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.9.6 (2022-11-14)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.9.5 (2022-10-28)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.9.4 (2022-10-17)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.9.3 (2022-10-10)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.9.2 (2022-09-14)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.9.1 (2022-08-24)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.9.0 (2022-08-09)

Features

  • include all Dev Mode files in side effects (f70817c)

0.8.13 (2022-08-04)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.8.12 (2022-07-18)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.8.11 (2022-06-29)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.8.10 (2022-06-07)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.8.9 (2022-05-12)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.8.8 (2022-04-21)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.8.7 (2022-03-30)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.8.6 (2022-03-08)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.8.5 (2022-03-04)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.8.4 (2022-02-22)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.8.3 (2022-01-26)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.8.2 (2022-01-07)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.8.1 (2021-12-13)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.8.0 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.7.1 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.7.0 (2021-11-02)

Features

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.6.12 (2021-09-20)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.6.11 (2021-08-24)

Bug Fixes

  • correct @element jsDoc listing across library (c97a632)

0.6.10 (2021-07-22)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.6.9 (2021-07-01)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.6.8 (2021-06-16)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.6.7 (2021-06-07)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.6.6 (2021-05-12)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.6.5 (2021-04-15)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.6.4 (2021-04-09)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.6.3 (2021-03-29)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.6.2 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.6.1 (2021-03-05)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.6.0 (2021-03-04)

Features

  • use latest exports specification (a7ecf4b)

0.5.1 (2021-02-11)

Bug Fixes

  • update to latest spectrum-css packages (a5ca19f)

0.5.0 (2021-01-21)

Bug Fixes

  • include the "types" entry in package.json files (b432f59)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • use latest @spectrum-css/* versions (c35eb86)

Features

  • illustrated-message: update spectrum css input (25c0545)
  • styles: vend CSS literal versions of the typography system (6406c96)

0.4.0 (2021-01-13)

Bug Fixes

  • include the "types" entry in package.json files (b432f59)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • use latest @spectrum-css/* versions (c35eb86)

Features

  • illustrated-message: update spectrum css input (25c0545)
  • styles: vend CSS literal versions of the typography system (6406c96)

0.3.3 (2020-10-12)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.3.2 (2020-10-12)

Bug Fixes

  • include default export in the "exports" fields (f32407d)

0.3.1 (2020-09-25)

Bug Fixes

  • update side effect listings (8160d3a)

0.3.0 (2020-08-31)

Features

  • update to Spectrum CSS v3.0.0 (e8b3d8f)

0.2.2 (2020-08-19)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.2.1 (2020-07-22)

Bug Fixes

  • illustrated-message: use accessibile tagnames (e47b469)

0.2.0 (2020-07-17)

Features

  • leverage "exports" field in package.json (321abd7)

0.1.11 (2020-06-08)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.1.10 (2020-04-16)

Performance Improvements

  • use "sideEffects" listing in package.json (7271614)

0.1.9 (2020-04-07)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.1.8 (2020-03-11)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.1.7 (2020-01-06)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.1.6 (2019-11-27)

Bug Fixes

  • include "type" in package.json, generate custom-elements.json (1a8d716)

0.1.5 (2019-11-19)

Note: Version bump only for package @spectrum-web-components/illustrated-message

0.1.4 (2019-10-14)

Performance Improvements

  • use imported TypeScript helpers instead of inlining them (cc2bd0a)

0.1.3 (2019-10-03)

Note: Version bump only for package @spectrum-web-components/illustrated-message

Attributes and Properties

Property Attribute Type Default Description description description string '' heading heading string ''

Slots

Name Description default slot The SVG that represents the illustration description Description text for the illustration heading Headline for the message