Create visual breathing room
Dividers introduce a pause between content sections, helping users mentally separate one topic from the next.
Divider
A divider is a thin line that groups content in lists and layouts.
GitHub
components/divider
components/dividerStorybook
components/divider
components/dividerGroup without boxing
A line is lighter than a card border — use dividers when you want to separate content without enclosing it.
Works horizontally and vertically
Orientation options let dividers separate both stacked sections and side-by-side elements consistently across layouts.
Left
1
Rule
2
Orientation
Orientation
Dividers can run horizontally or vertically depending on the layout direction of the content they separate.
Use to separate content stacked vertically — such as between sections, list rows, or form groups.
Left
Component tokens
Component tokens are specific to each component. Use the table title as the prefix: border-color-muted under sgds/divider means sgds/divider/border-color-muted.
sgds/divider
sgds/border-color-mutedsgds/border-width/1sgds/border-width/2sgds/border-width/4When to use
- Use divider to separate related sections when spacing alone does not make the relationship clear enough.
- Use it sparingly so it supports hierarchy instead of dominating it.
When not to use
- Do not add dividers between every small block of content.
- Do not use divider as the only signal that content has changed in meaning or priority.
Use the divider to support reading
A divider should quietly separate content without becoming the main thing users notice.
Do not divide everything
Too many dividers add noise and make the page feel heavier than it needs to.
Built-in accessibility
- Dividers separate sections visually.
- The component does not add custom keyboard behaviour.
Labels and content
- Use dividers to separate related groups, not as decoration between every item.
- Do not rely on a divider as the only cue that the page structure changed.
Focus and interaction
- Dividers should not receive focus.
- Use headings or labels to describe the sections on each side of a divider.
This component does not have a separate keyboard interaction table because:
- Dividers are visual separators and should not receive focus.
- Use headings or labels to communicate the structure that the divider separates.
Have suggestions or feedback?
Share them with us on
Found a bug or issue?
Report it on GitHub
Singapore Government Design System
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.