Appearance
Divider
A divider is a thin line that groups content in lists and containers.
Dividers can reinforce tapability, such as when used to separate list items or define tappable regions in an accordion.
Usage
Use full width dividers to separate larger sections of unrelated content.
html
<section>
<p>Lorem ipsum...</p>
<md-divider></md-divider>
<p>Lorem ipsum...</p>
</section>
Inset dividers
Use inset dividers to separate related content within a section.
html
<section>
<p>Material 2</p>
<md-divider inset></md-divider>
<p>Material 3</p>
</section>
Inset dividers are equally indented from both sides of the screen by default. Use inset-start
or inset-end
to change this.
html
<section>
<p>Material 2</p>
<md-divider inset-start></md-divider>
<p>Material 3</p>
</section>
Accessibility
Dividers are decorative by default and not announced by assistive technology.
Add a role="separator"
attribute to non-decorative dividers that should be announced.
html
<ul>
<li>Item one</li>
<md-divider inset></md-divider>
<li>Item two</li>
<md-divider role="separator"></md-divider>
<li>Item three</li>
<md-divider inset></md-divider>
<li>Item four</li>
</ul>
Theming
Divider supports theming and can be customized with CSS custom property tokens.
Tokens
Token | Default value |
---|---|
--md-divider-color | --md-sys-color-outline-variant |
--md-divider-thickness | 1px |
Example
html
<style>
:root {
--md-sys-color-outline-variant: #BEC9C8;
--md-divider-thickness: 2px;
}
</style>
<section>
<p>Lorem ipsum...</p>
<md-divider></md-divider>
<p>Lorem ipsum...</p>
</section>
API
MdDivider <md-divider>
Properties
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
inset | inset | boolean | false | Indents the divider with equal padding on both sides. |
insetStart | inset-start | boolean | false | Indents the divider with padding on the leading side. |
insetEnd | inset-end | boolean | false | Indents the divider with padding on the trailing side. |