Search the design system

Components

Separator

The separator serves the role of a visual divider between different sections within a design.

separator

Usage

Use the separator to organize content, create visual rhythm and establish hierarchy in your design. Be mindful of not overusing separators, which can result in a cluttered impression. Use separators in conjunction with spacing to create an appealing design.

Don’t overuse separators

Overusing separators can make a design feel cluttered. Make sure to use separators where they separate content in a meaningful way.

Use separators sparingly.
Use separators sparingly.
Don’t overuse separators.
Don’t overuse separators.

Formatting

Anatomy

The separator consists of a single horizontal or vertical stroke.

Anatomy of a Separator

A. Stroke

ComponentsSelect / Code
ComponentsSeparator / Code

© DesignTech - AB Svenska Spel

What's newTerms of useAccessibility statementCookiesTeams channel [Internal]
@svs/ui version
2.3.0

Feedback

We always want to improve the Design System and would be thrilled to get your feedback.

Please share your wisdom with us.

Microsoft Teams [internal]

Designsystem@svenskaspel.se