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.




Type block


Block dividers span the width of their container. Use them to create strict distinctions between items.

Type block


Inset dividers don’t extend to the edges of a container and imply closer relationships. Use them to group similar items.



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.

Type block
Type block

Creating text hierarchy

In long texts, place dividers above text headings to create content groupings.

Type block

Put the divider above the header

Type block

Don’t underline headers with dividers


If a divider only creates visual separation but not content separation, hide it from screen readers with aria-hidden.


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.

Advanced settings