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
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
Last updated
Was this helpful?