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.

Loading...

Resources


Types

Type block

Block

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

Type block

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.

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


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.

Advanced settings