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.
<divcds-layout="vertical gap:md"><pcds-text="body disable-lhe">It is often preferable to use dividers inside of layouts.</p><cds-divider></cds-divider><pcds-text="body disable-lhe">This allows them to span the dimensions of their containers as expected.</p></div>
Vertical
Demo Button 1Demo Button 1Demo 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.
<divcds-layout="horizontal gap:md align:vertical-center p-x:md"style="background:var(--cds-alias-app-background-color)"><cds-buttonsize="sm"action="outline">Demo Button 1</cds-button><cds-buttonsize="sm"action="outline">Demo Button 1</cds-button><cds-dividerorientation="vertical"></cds-divider><cds-buttonsize="sm"action="outline">Demo Button 2</cds-button><cds-dividerorientation="vertical"></cds-divider><pcds-text="body disable-lhe">Vertical dividers should be used inside horizontal layouts.</p></div><pcds-text="body"cds-layout="m-y:lg">
A background color has been applied to the section above to demonstrate the divider taking the full height of its
container.
</p>
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.
<divstyle="background:var(--cds-alias-app-background-color);width: 100%;height: 80px;padding: 0 49%"><cds-dividerorientation="vertical"></cds-divider></div><pcds-text="body"cds-layout="m-y:lg">
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.
</p>
Custom
Demo Button 1Demo Button 2Demo Button 3
The thickness (size) and color of dividers can be customized.
<style>cds-divider.app-custom{--color: red;--size: 0.1rem;}cds-divider.app-custom-2{--color: purple;--size: 0.15rem;--padding: 0.3rem 0.2rem;}cds-divider.app-custom-3{--color: green;}.old-style-float::after{clear: both;content:'';display: block;height: 0;visibility: hidden;}.old-style-float>*{float: left;height: 100%;}</style><divcds-layout="vertical gap:lg"><divcds-layout="horizontal gap:md align:vertical-center"><cds-buttonsize="sm">Demo Button 1</cds-button><cds-dividerclass="app-custom-2"orientation="vertical"></cds-divider><cds-buttonsize="sm"action="outline">Demo Button 2</cds-button><cds-buttonsize="sm"action="outline">Demo Button 3</cds-button></div><cds-dividerclass="app-custom"></cds-divider><divcds-layout="align:stretch"><pcds-text="body disable-lhe">The thickness (size) and color of dividers can be customized.</p></div></div>
DarkTheme
It is often preferable to use dividers inside of layouts.
This allows them to span the dimensions of their containers as expected.
<divcds-layout="vertical gap:md"cds-theme="dark"><pcds-text="body">It is often preferable to use dividers inside of layouts.</p><cds-divider></cds-divider><pcds-text="body">This allows them to span the dimensions of their containers as expected.</p></div>