Spryker

Divider

Thin line that separates content or groups of content.

Variants

Three divider modes cover layout, inline groupings, and section transitions. Use sparingly — whitespace usually communicates more.

VariantPurpose
HorizontalDefault separator between blocks of content — sections, rows, grouped items.
VerticalInline separator between toolbar items, list entries, or side-by-side actions.
LabelledHorizontal divider with a centred label — for time-based or sectioned lists.

Design tokens

TokenValueDescription
border/default
#cccccc
Default divider colour
border/subtle
#e1e1e1
Subtle emphasis colour
content/tertiary
#8f8f8f
Divider label colour

Guidelines

Do
  • Use dividers to separate groups of related content
  • Prefer spacing over dividers when the layout is already clear
  • Use subtle emphasis in dense layouts and lists
  • Use labelled dividers to break up time-based lists
Don't
  • Stack multiple dividers in a row
  • Use a divider when a heading would communicate the break better
  • Rely on dividers as the only visual hierarchy
  • Use vertical dividers in responsive layouts that stack on mobile
Avatar