EDS – Equinor Design System

A divider is a thin line that separates content into clear groups.


Dividers are not meant to scream, they are subtle ways to group sections. Dividers can only be used in the colors UI Background/Default, UI Background/Light and UI Background/Medium. Dividers can be used full-width where allowed by parent container, or attached to a column’s width.


  • Do not use colors that are not approved for dividers.
  • Do not change the thickness of the divider.
  • Do not change the style of the divider.


There are two divider variations available for use—Divider/Small and Divider/Medium. The divider line is the same in both of these, yet the spacing around the divider is different.


FigmaExternal linkFigma design of divider

✏️ Edit this page on GitHub