sp-illustrated-message

NPM 1.0.1

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

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.

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.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