Skip to main content Skip to navigation Skip to search

To use the divider component import the component in your JavaScript.

import '@cds/core/divider/register.js';

Clarity recommends using dividers inside of containers with a cds-layout attribute. This allows dividers to span the full dimensions of the container as expected.

Horizontal

It is often preferable to use dividers inside of layouts.

This allows them to span the dimensions of their containers as expected.

Vertical

Demo Button 1 Demo Button 1 Demo Button 2

Vertical dividers should be used inside horizontal layouts.

A background color has been applied to the section above to demonstrate the divider taking the full height of its container.

VerticalFill

If not using a layout, the vertical divider should still be able to fill the known height of a container. But the container needs to have a height defined on it. Layouts, however, are preferred and recommended.

Custom

Demo Button 1 Demo Button 2 Demo Button 3

The thickness (size) and color of dividers can be customized.

DarkTheme

It is often preferable to use dividers inside of layouts.

This allows them to span the dimensions of their containers as expected.