List

wiz-list is a cross-channel list component for displaying organized item collections with flexible layout support. It provides a semantic container for rendering lists across different content items: e-Detailers and emails. This eliminates the need to create separate list components for different delivery channels.

The wiz-list component supports configurable rendering with automatic adaptation to email environments using table structures.

The cross-channel list component has the following key features:

• Support for custom markers (bullets, numbers, icons).

• Flexbox layout for e-Detailers.

• Table-based structure for email compatibility.

• Works with wiz-list-body and wiz-list-item sub-components for structured content organization.

Installation

The wiz-list component is part of the eWizard.js component library. To install it to your project, run the following command in the terminal:

wiz install @component/wiz-list

Register the component globally in your application or import it in your Vue template.

Properties

The wiz-list component has the following properties:

Property	Type	Default	Description
componentName	String	'List'	The display name for the component in eWizard Editor.
tag	String	'div'	The HTML tag used to render the container in e-Detailers. It's a sealed property that can't be modified.

Slots

In the component hierarchy, wiz-list-body must be a direct child of wiz-list, while wiz-list-item must be placed inside wiz-list-body.

Since wiz-list-item has two slots, place your list content as follows:

• List markers – inside the marker slot

• List content – inside the default slot

Sub-components

The wiz-list component works in conjunction with two related components:

Component	Type	Description	Properties	Slots
wiz-list-body	Layout parent	Wrapper component that acts as a container for list items. Functionally transparent, it passes through its default slot content.	N/A	default — Renders wrapped slot content
wiz-list-item	Layout child	Individual list item that supports a marker slot and content slot. Renders flexbox layout in web/eDetailer or table structure in email.	componentName (String, default: 'List Item') tag (String, default: 'div')	marker—optional slot for list markers (bullets, numbers, icons, etc.). default—main content slot for the list item.

Channel-specific behavior

The cross-channel list component adapts its rendering and functionality based on the content item context.

• Renders as a standard <div> (or specified tag) with the wiz-list class.

• List items use flexbox layout with marker and content sections.

• Standard CSS styling and responsive design.

• Renders as a <table> structure for email compatibility.

• List items render as table rows with separate cells for marker and content.

• Vertical alignment set to top for consistent rendering.

• Ensures reliability across email clients.