The new mdui 2 based on Material Design 3 and Web Components is now available. Check out the mdui 2 documentation.

Divider

Dividers are used to manage and separate content in lists and page layouts to provide better visual clarity and sense of space.

Dividers are implemented in pure CSS, so writing the HTML is enough for them to take effect.

Dark divider, for light backgrounds
Light divider, for dark backgrounds
Auto-adjusting color divider, automatically adjusts to dark or light based on the page theme

Style

Full-width dividers take up 100% of the width. Available class names include:

Example

<div class="mdui-divider"></div>

Inset dividers are indented by 72px from the left, frequently used in lists that feature avatars or icons. Available class names include:

Example

<div class="mdui-divider-inset"></div>

Class Name	Description
`.mdui-divider`	Defines a divider. Dark in the default theme, light in the dark theme.
`.mdui-divider-light`	Defines a light divider for use on dark backgrounds.
`.mdui-divider-dark`	Defines a dark divider for use on light backgrounds.
`.mdui-divider-inset`	Defines an inset divider. Dark in the default theme, light in the dark theme.
`.mdui-divider-inset-light`	Defines a light inset divider for use on dark backgrounds.
`.mdui-divider-inset-dark`	Defines a dark inset divider for use on light backgrounds.