Dividers can reinforce tapability, such as when used to separate list items or define tappable regions in an accordion.
Preview
Installation
To import just the component styles, copy the following into your project’s styles.css file:
/* Core Styles */
@import url('https://kherrick.github.io/material-design-lite/css/core.css');
/* Material Icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
/* Component Styles */
@import url('https://kherrick.github.io/material-design-lite/css/components/divider/style.css');Usage
Start with a hr or div element and add the divider class name:
<hr class="divider">The divider class name is implicit when using the hr element.
Variants
Default
Default chip styling.
<hr class="divider">Design Tokens
| Token | Description | Default |
|---|---|---|
--md-sys-comp-divider-color | The color of the divider | |
--md-comp-divider-container-height | The height of the container | 1px |
--md-comp-divider-container-width | The width of the container | 100% |