The m3e-divider component visually separates content within layouts, lists, or containers using a thin, unobtrusive line.

npm i @m3e/divider

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

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

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

A m3e-divider can be used on its own to create a horizontal (or vertical) line.

Use the inset attribute to control whether the divider is inset. Alternately, use inset-start and inset-end to control the start or end inset.

<m3e-divider></m3e-divider>
<m3e-divider inset></m3e-divider>
<m3e-divider inset-start></m3e-divider>
<m3e-divider inset-end></m3e-divider>

Use the vertical attribute to control whether a divider is oriented vertically.

<m3e-divider vertical></m3e-divider>
<m3e-divider vertical inset></m3e-divider>
<m3e-divider vertical inset-start></m3e-divider>
<m3e-divider vertical inset-end></m3e-divider>

The m3e-divider applies the ARIA role="separator", implementing a non-focusable separator used to separate 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/divider/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.