The Divider exists to create clear, unambiguous separation between distinct content sections or thematic groups on a page. It helps users mentally segment information, reducing cognitive effort when scanning or reading through dense or varied content.
Do's
- use the Divider to separate semantically distinct content blocks, for example, between a main body section and a supporting information area
- use headings and sub-headings as the primary way to divide the page, as it makes it easier for a user to scan
Don'ts
- do not use it as a substitute for proper heading structure or section landmarks
- do not use the Divider as a decorative element or to fill visual space where no meaningful content boundary exists
- avoid overusing it since placing a Divider between every content block flattens the hierarchy and removes its value
When to use
- use for long-form editorial content such as articles, news pages, or policy documents, where distinct topic areas follow one another in a single scrollable view
- in page sections without headings, when a visual break is needed between content groups that do not each warrant their own heading level
When not to use
- do not use when headings already define the boundary, a prominent heading paired with adequate spacing makes a Divider redundant