The m3e-list component provides a list container for organizing and displaying multiple list items.

npm i @m3e/list

This section outlines usage examples and configuration guidance for the components in this package.

To create a list of items, use the m3e-list component with one or more m3e-list-item components nested inside it.

The m3e-list-item component provides a modular layout for structured content blocks. It exposes the following named slots:

• (default) — Renders the content of the list item.
• leading-icon — Renders the leading icon of the list item.
• overline — Renders the overline of the list item.
• supporting-text — Renders the supporting text of the list item.
• trailing-supporting-text — Renders the trailing supporting text of the list item.
• trailing-icon — Renders the trailing icon of the list item.

<m3e-list>
  <m3e-list-item>
    <m3e-icon slot="leading-icon" name="person"></m3e-icon>
    <span slot="overline">Overline</span>
    Headline
    <span slot="supporting-text">Supporting text</span>
    <span slot="trailing-supporting-text">100+</span>
    <m3e-icon slot="trailing-icon" name="arrow_right"></m3e-icon>
  </m3e-list-item>
</m3e-list>

The following example illustrates use of the m3e-divider to provide separators between items in a m3e-list. For more information on dividers, see Divider.

<m3e-list>
  <m3e-list-item>Item 1</m3e-list-item>
  <m3e-divider></m3e-divider>
  <m3e-list-item>Item 2</m3e-list-item>
  <m3e-divider></m3e-divider>
  <m3e-list-item>Item 3</m3e-list-item>
</m3e-list>

Dividers can also be inset using the inset attribute of a m3e-divider.

<m3e-list>
  <m3e-list-item>Item 1</m3e-list-item>
  <m3e-divider inset></m3e-divider>
  <!-- Additional items omitted for brevity -->
</m3e-list>

Lists are given the ARIA role="list" and list items are given role="listitem" to ensure that assistive technologies can correctly interpret the structure and semantics of the content.

This package uses JavaScript Modules. To use it directly in a browser without a bundler, use a module script similar to the following.

<script type="module" src="/node_modules/@m3e/list/dist/index.js"></script>

In addition, you must use an import map to include dependencies.

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "@m3e/core": "/node_modules/@m3e/core/dist/index.js"
    }
  }
</script>

For production, use index.min.js for faster load times.

This package includes a Custom Elements Manifest (custom-elements.json), which documents the properties, attributes, slots, events and CSS custom properties of each component.

You can explore the API below, or integrate the manifest into your own tooling.