IllustratedMessage

Use IllustratedMessage to display an illustration alongside a message, usually for an empty state or an error page. It renders its content inside a Card.

Import

import { IllustratedMessage } from '/@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
icon	VNode	No	Icon to display, rendered at size 80.
heading	string	No	Heading text to display.
headingLevel	1 | 2 | 3 | 4 | 5 | 6	No	Heading level for the heading. Defaults to 2.
message	VNode	No	Message content to display below the heading.
action	VNode	No	Action element, such as a Button, to display below the message.
variant	'primary' | 'secondary'	No	Change the card style. Defaults to secondary.

IllustratedMessage also accepts standard HTML attributes (for example, className), except icon and action.

Example

Render an empty-cart message with an icon, heading, message, and action:

import { IllustratedMessage, Icon, Button, provider } from '/@dropins/tools/components.js';
import { h } from '/@dropins/tools/preact.js';

await provider.render(IllustratedMessage, {
  icon: h(Icon, { source: 'Cart' }),
  heading: 'Your cart is empty',
  headingLevel: 2,
  message: h('p', {}, 'Add items to get started.'),
  action: h(Button, { children: 'Continue shopping' }),
})(document.querySelector('.illustratedmessage'));

Related

• Icon — supplies the illustration for the icon prop.
• Button — a common choice for the action prop.