Content

Divider

A hairline with an optional label. The only line the system draws between siblings.

Examples

Divider


or

Anatomy

hrA bare 1px hairline, no border.
.dividerA short label centred between two hairlines that fill the remaining width.

Accessibility

  • <hr> is announced as a separator. Use it when the break is in the content, not only for decoration.
  • .divider is plain text between two drawn lines; its label is read in sequence, so it must make sense read aloud ("or").
Jump to
ProportionFoundations
MaterialFoundations
PresetsFoundations
ShellLayouts · Application
Container and stacksLayouts · Pages
SplitLayouts · Pages
Grid, bento, masonryLayouts · Pages
Switcher and rowLayouts · Pages
↑↓Move↵OpenescClose