Divider
An element designed to visually separate or partition others.
Defaults
To create a Divider, create an element with the class cd-divider.
Some content
More content
<p>Some content</p>
<hr class="cd-divider" />
<p>More content</p>Orientation
You can change the direction of a Divider by adding the class cd-orientation-vertical. Horizontal is the default.
Some content
More content
<p>Some content</p>
<hr class="cd-divider cd-orientation-vertical" />
<p>More content</p>Thickness
To make the Divider thicker, add the class cd-width-thick (to make it a little thicker) or cd-width-thicker (to make it significantly thicker).
For fine-grained control over the line thickness, you can set the --cd-divider-thickness
CSS variable on the Divider element. The value of this variable must be a valid line width
(e.g., 1px, 0.1rem, var(--cd-border-m)).
Thin (default)
Thick
Thicker
Custom (0.2rem)
<p>Thin (default)</p>
<hr class="cd-divider" />
<p>Thick</p>
<hr class="cd-divider cd-width-thick" />
<p>Thicker</p>
<hr class="cd-divider cd-width-thicker" />
<p>Custom (0.2rem)</p>
<hr
class="cd-divider"
style="--cd-divider-thickness: 0.2rem"
/>Pattern
You can change the pattern of a Divider by adding the classes cd-style-dashed or cd-style-dotted.
Some content
More content
Even more content
<p>Some content</p>
<hr class="cd-divider cd-style-dashed" />
<p>More content</p>
<hr class="cd-divider cd-style-dotted" />
<p>Even more content</p>Visibility
To add space between elements without a visible line, create a Divider with the class cd-is-invisible.
Some content
More content
<p>Some content</p>
<hr class="cd-divider cd-is-invisible" />
<p>More content</p>Removing Margin
To remove the default margin around a Divider, add the class cd-spacing-none.
Some content
More content
<p>Some content</p>
<hr class="cd-divider cd-spacing-none" />
<p>More content</p>Customizing Margin
For fine-grained control over the margin on either side of the Divider, you can set
the --cd-divider-spacing CSS variable on the Divider element. The value of this variable must
be a valid size (e.g., 1rem, var(--cd-space-l)).
Some content
More content
<p>Some content</p>
<hr class="cd-divider" style="--cd-divider-spacing: 1rem" />
<p>More content</p>