Divider

Dividers are horizontal lines used to separate content sections, creating visual hierarchy and improving content organization. They help users scan and navigate through content more effectively by providing clear visual breaks.

Style settings

Property	Description
Line
Color	Select from brand color options like "Brand/Border" for consistent styling across the design system.
Thickness	Adjust the slider to control the thickness of the divider line.
Numbering
Background color	Select the color that appears behind the divider, such as "Background/Primary" to maintain consistent background styling.
Alignment	Choose how the divider aligns horizontally: Left-aligned Center-aligned Right-aligned
Height	Set the vertical space the divider occupies.
Width	Set the horizontal length of the divider.
Rounding	Adjust the slider to control corner roundness of the divider container.
Display border	Select "Yes" or "No" to add or remove an additional border around the divider.
Border color	Select from brand color options or from the palette.
Thickness	Adjust the slider to control the thickness of the border.
Effects
Divider shadow	Click the "+" icon to add shadow effects. Select from shadow styles: None, Soft, Regular, or Retro.
Double line
Margin between lines	Adjust this value to control the space between the two dividers.

Typography settings

The Typography tab allows you to configure the appearance of numerical markers in dividers:

• Font

• Style

• Size

• Line spacing

• Color of numbers

For details on how to configure each parameter, see Typography and fonts.