Skip to content

Dividers

A divider is a thin line that groups content in lists and layouts.

Dividers separate content into clear groups.

List Dividers

The divider renders as an <hr> by default. You can save rendering this DOM element by using the divider property on the ListItem component.

HTML5 Specification

In a list, you should ensure the Divider is rendered as an <li> to match the HTML5 specification. The examples below show two ways of achieving this.

Inset Dividers

  • Photos

    Jan 9, 2014

  • Work

    Jan 7, 2014

  • Vacation

    July 20, 2014

Subheader Dividers

  • Photos

    Jan 9, 2014

  • Divider
  • Work

    Jan 7, 2014

  • Leisure
  • Vacation

    July 20, 2014

Middle Dividers

Toothbrush

$4.50

Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the hall.


Select type

Extra Soft
Soft
Medium
Hard

Vertical Dividers

You can also render a divider vertically using the orientation prop.