sp-illustrated-message

NPM

1.0.0

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API Changelog

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

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

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 #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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.