sp-illustrated-message

NPM 1.4.0

View Storybook

Try it on webcomponents.dev

Overview

API

Changelog

Description

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

Usage

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';

Example

<sp-illustrated-message
    heading="Drag and Drop Your File"
    description="Additional descriptive text"
>
    <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>

Content

The illustrated message accepts an <svg> into its default slot. This SVG is displayed as an illustration above the heading and description.

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

string

''

heading

string

''

Slots

Name

Description

default slot

The SVG that represents the illustration

description

Description text for the illustration

heading

Headline for the message

Spectrum Web Components

sp-illustrated-message

Description

Usage

Example

Content

Changelog

Patch Changes

1.3.0

Patch Changes

1.2.0 (2025-02-27)

1.1.2 (2025-02-12)

1.1.1 (2025-01-29)

1.1.0 (2025-01-29)

Bug Fixes

1.0.3 (2024-12-09)

1.0.1 (2024-11-11)

1.0.0 (2024-10-31)

0.49.0 (2024-10-15)

0.48.1 (2024-10-01)

0.48.0 (2024-09-17)

0.47.2 (2024-09-03)

0.47.1 (2024-08-27)

0.47.0 (2024-08-20)

0.46.0 (2024-08-08)

0.45.0 (2024-07-30)

0.44.0 (2024-07-15)

0.43.0 (2024-06-11)

0.42.5 (2024-05-24)

0.42.4 (2024-05-14)

0.42.3 (2024-05-01)

0.42.2 (2024-04-03)

0.42.1 (2024-04-02)

0.42.0 (2024-03-19)

Features

0.41.2 (2024-03-05)

0.41.1 (2024-02-22)

0.41.0 (2024-02-13)

0.40.5 (2024-02-05)

0.40.4 (2024-01-29)

0.40.3 (2024-01-11)

0.40.2 (2023-12-18)

0.40.1 (2023-12-05)

0.40.0 (2023-11-16)

0.39.4 (2023-11-02)

0.39.3 (2023-10-18)

0.39.2 (2023-10-13)

0.39.1 (2023-10-06)

0.39.0 (2023-09-25)

0.38.0 (2023-09-05)

0.37.0 (2023-08-18)

0.36.0 (2023-08-18)

0.35.0 (2023-07-31)

0.34.0 (2023-07-11)

0.33.2 (2023-06-14)

0.33.0 (2023-06-08)

0.32.0 (2023-06-01)

0.31.0 (2023-05-17)

0.30.0 (2023-05-03)

Bug Fixes

Features

Performance Improvements

Reverts

0.10.0 (2023-04-24)

Features

0.9.14 (2023-04-05)

0.9.13 (2023-03-22)

0.9.12 (2023-03-08)

0.9.11 (2023-02-08)

0.9.10 (2023-01-23)

0.9.9 (2023-01-09)

0.9.8 (2022-12-08)

0.9.7 (2022-11-21)

0.9.6 (2022-11-14)

0.9.5 (2022-10-28)

0.9.4 (2022-10-17)

0.9.3 (2022-10-10)

0.9.2 (2022-09-14)

0.9.1 (2022-08-24)

0.9.0 (2022-08-09)

Spectrum
Web Components