Dividers should be used sparingly. A few areas where dividers can be helpful include: separating complex blocks of content (i.e., product comparison), connecting interactive selections (i.e., accordion, left/right nav).
- Consistent space is a great alternative to using dividers
- A hierarchy of dividers provides a visual cue when rows are being compared in a table or nav structure
- Engineers can use the .border base-styles rule directly in place of
<Divider>(see usage notes below)
Level 2 (default)
1 | 2 | 3 | '1' | '2' | '3'
Levels of lightness. 3 is the lightest which maps to the design token from the design system, "neutral-lightest".