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.

• Design article
• API Documentation
• Source code

Usage ​

Use full width dividers to separate larger sections of unrelated content.

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

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

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

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

• All tokens

Example ​

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