Get startedFoundationsComponentsTemplatesBlocksAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.
Browse Components

Components

AccordionAlertBadgeBreadcrumbButtonCard groupCardIcon cardImage cardThumbnail cardCheckboxClose buttonCombo boxDatepickerDescription listDividerDrawerDropdownFile uploadFooterIcon buttonIcon listInputLinkMainnavMastheadModalOverflow menuPaginationProgress barQuantity toggleRadioSelectSidebarSidenavSkeletonSpinnerStepperSubnavSwitchSystem bannerTabTableTable of contentsTextareaToastTooltip

Divider

A divider is a thin line that groups content in lists and layouts.

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Separate content

Use dividers to mark a clear break between related sections.

Add light structure

A divider separates content with less weight than a card or container.

Work across orientations

Use horizontal or vertical dividers to fit the layout direction.

Anatomy

1

Divider

Configuration

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.

Thickness

Divider thickness controls how heavy the rule appears, letting you match the visual weight to the importance of the separation.

The default. Use for subtle separation between closely related content such as list rows or paragraphs.

Structure

Design tokens used

Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.

CategoryTokenValueWhere it's usedBordersgds-border-width-11pxBorder thickness of items inside the component

Usage

When 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.

Best practices

Personal details

Contact information

Use a divider to separate related groups within a section

Use a divider when content sits close together but represents distinct ideas within the same surface.

Section title

Short paragraph that already has generous spacing above and below.

Another paragraph.

Do not use a divider when spacing alone is enough

If the layout already has clear spacing between sections, a divider only adds noise. Use spacing first.

Edit Duplicate Delete
Match the divider orientation to the layout direction

Use a vertical divider only between side-by-side content. Use the horizontal default everywhere else.

Profile details

Contact details

Notification settings

Do not make every divider heavy

Avoid thick dividers between every small group. Equal weight hides which separations matter.

Account settings

Notification preferences

Use thicker dividers sparingly

Reserve thicker rules for the strongest separation between major page regions to keep hierarchy clear.

Section title

Do not use a divider as a decorative element

A divider should always carry meaning. Rules added purely for visual rhythm make structure harder to read.

Accessibility considerations

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.

Keyboard interaction

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.

Updates

DateVersionDescription04 Apr 2025v3.0.0- **Divider** – A simple horizontal or vertical divider to separate sections.

Roadmap

Planned itemStatusTargetFuture enhancements for dividerPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #ask-sgds-v3

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/divider

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.

Past VersionsSGDS v1SGDS v2