Divider Preview
A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
Resources
Types
Block
Block dividers span the width of their container. Use them to create strict distinctions between items.
Inset
Inset dividers don’t extend to the edges of a container and imply closer relationships. Use them to group similar items.
Layout
Margins
Margins are not baked into the divider component to allow for flexibility in different layouts. Minimally, default dividers and dividers with content should have 12 pixels of space on top and bottom. Dividers with icons should have 8 pixels on top and bottom.
Creating text hierarchy
In long texts, place dividers above text headings to create content groupings.
Put the divider above the header
Don’t underline headers with dividers
Accessibility
If a divider only creates visual separation but not content separation, hide it from screen readers with aria-hidden.
Content
If using optional text, the copy should be a short indication of what’s in the next section.
Use sentence style capitalization—only capitalize the first word. For more info, see Capitalization in the Microsoft Writing Style Guide.
