A divider is a thin line that visually separates content into sections.
Use a divider to separate content to visually signify a change of topic, focus, or expected interaction. Use a divider with or without a header – place dividers in the content area or inside container components.
Use a divider between sections. The section headers are optional.
Overuse divider by placing them between individual items
There are two types of dividers: horizontal and vertical.
Horizontal dividers can separate content vertically. They are more commonly used.
Horizontal dividers in a card component separating the title, content, and actions
Horizontal divider in a vertical nav component separating sections with headers
Dividers can also change orientation to be vertical. Vertical dividers can separate content horizontally.
A vertical divider separating a header and an action.
Vertical headers separating 3 clusters of feature content