Divider

<p>Your order has shipped.</p>
<md-gb-divider></md-gb-divider>
<p>Delivery is expected on Friday.</p>

Install with shadcn/ui: npx shadcn@latest add https://material-web.dev/3.0/r/md-divider.json (setup)

• Group and create hierarchy. Dividers visually group components and can imply a parent and child relationship.
• Full width for sections. Use full-width dividers to separate larger sections of unrelated content.
• Inset for related items. Use inset dividers to separate related content within a section, such as items in a list.
• Don't overuse. Spacing and type styles often separate content well enough on their own.

A divider is a single element.

<p>Inbox</p>
<md-gb-divider></md-gb-divider>
<p>Sent</p>

Add inset to indent both ends by 16dp. Use inset-start or inset-end to indent only one end.

<md-gb-divider></md-gb-divider>
<md-gb-divider inset-start></md-gb-divider>
<md-gb-divider inset></md-gb-divider>

Add vertical for a divider between side-by-side content.

<div style="display: flex; align-items: center; gap: 8px">
  <span>Day</span>
  <md-gb-divider vertical></md-gb-divider>
  <span>Week</span>
</div>

For plain HTML, the divider classes style a native <hr>. divider() is a Lit directive that adds them, and dividerClasses() returns them for other code. Pass {vertical: true} for a vertical divider.

<span>Day</span>
<hr id="rule">
<span>Week</span>

@import '@material/web/labs/gb/components/divider/divider.css';

#rule {
  align-self: stretch;
}

import {dividerClasses} from '@material/web/labs/gb/components/divider/divider.js';

const classes = dividerClasses({vertical: true});
document.querySelector('#rule')!.className = Object.keys(classes)
  .filter((name) => classes[name])
  .join(' ');

• A divider is decorative and not announced by assistive technology. It has no contrast minimum.
• Add role="separator" to a divider that should be announced.

<p>Account</p>
<md-gb-divider role="separator"></md-gb-divider>
<p>Privacy</p>

A Material Design component.