After reading this article, you’ll know:

The Divider component separates components from each other and creates a stronger definition in the segments of your layout. You could ultimately say that it is an enhancer for the layout components.

The sole purpose of the divider is to divide components from each other, from a small break of space to a big area in your page that needs an eye-catching line to showcase a difference.

The Divider component is a plain out-of-the-box feature that has a few styling and spacing options. The first one is Thickness, allowing you to change the thickness of the divider line vertically, and doens't change the dividers width.

Using the Color option you can change the color of the divider line and you can customise the spacing around the divider with the Outer space option.

A divider is used to seperate page segments. In your page layout design you sometimes want to create a distinct line between items to make them appear more individually on your page. You can do so by adding a divider in between segments.

As shown in the example above; due to the placement of the divider segment 1 looks like an individual item, as where segment 2 and segment 3 seem to be a group.

In the following example, we get an idea that segment 1, segment 2, and segment 3 are all individual items. And this only because we added one line in our layout, a true game-changer!

The divider is a unique feature to assist your page layout, there isn't any component that would do quite the same. Only the List component allows you to select the divider as an option in its styling segment, which is the same one we are talking about right now, except build-in.

To make elements in your page appear as individual items, or to group other items together, you can use the divider to enhance your page layout.