Divisor

Components

Divisor

A splitter component, also known as a splitter, is a user interface element that is used to split or separate different content or sections on a web page or mobile application.

Preview

Figma

Uses

Divider components are commonly presented as horizontal or vertical lines that occupy a limited space on the screen and may have a certain width and height. They are often used to create a visual contrast between different content blocks and to improve the navigation and organization of content. The splitter components can also have custom design styles, such as colors, borders, and shadows, to stand out from the rest of the content and draw the user’s attention.

When to use

Split different sections of a web page or mobile app: Divider components can be used to divide the content of a page into separate and clearly defined sections. This can help improve the organization and readability of the content.

Create a visual contrast: Splitter components can be used to create visual contrast between different content blocks, which can help guide user attention and improve the user experience.

Separate items from a list: Splitter components can be used to separate items from a list, which can improve the readability and organization of content.

Separate items from a form: Divider components can be used to separate different fields from a form, which can improve readability and make it easier for the user to fill in the form.

Create an attractive visual effect: Divider components can be used to create an attractive visual effect and draw the user’s attention, especially if custom design styles are used.

Behaviour

Orientation

Horizontal

Vertical

Colour

Soft

Hard

Dark

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

The divider does not represent a thematic break and has no semantic meaning for assistive technology.

The divider should only be used for presentation purposes due to the above reason.