Standardized Design of Electronic Procedures
Home
First steps
First steps
What is DINTEL?
Designers
Developers
Resources
Frequently Asked Questions
Foundations
Foundations
Color
Typography
Box shadow
Spacing
Grid
Border
Border radius
Iconography
Illustrations
Animations
Accessibility
Design tokens
Writing guidelines
Data visualization
Interface elements
Interface elements
Modules
Templates
Components
Updates
Contact
Interface elements
Components
Divider
Divider
A splitter component, also known as a separator, is a user interface element that is used to divide or separate different content or sections on a web page or mobile application.
Uses
Dividing 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 visual contrast between different blocks of content and to improve navigation and organisation of content. Dividing components can also have customised design styles, such as colours, borders and shadows, to stand out from the rest of the content and draw the user's attention.
How to use
Dividing different sections of a web page or mobile application: Component dividers can be used to divide the content of a page into separate, clearly defined sections. This can help improve the organisation and readability of the content.
Create visual contrast: Splitter components can be used to create visual contrast between different blocks of content, which can help guide the user's attention and improve the user experience.
Separating items in a list: Splitter components can be used to separate items in a list, which can improve readability and organisation of content.
Separating form elements: Component dividers can be used to separate different fields on a form, which can improve readability and make it easier for the user to fill in the form.
Create an attractive visual effect: Splitter components can be used to create an attractive visual effect and attract the user's attention, especially if customised design styles are used.
Behaviour
Orientation
Horizontal
Vertical
Color
Accessibility
This component has been validated to comply with the accessibility requirements of UNE-EN 301549:2022 which encompasses the criteria of WCAG 2.1 (AA), however, changes to content and styles may affect accessibility compliance. Be sure to review and follow the guidelines in this section when updating or adding new content or styling to this component.
The divider does not represents a thematic break and has no semantic significance for assistive technology.
The divider should be used for presentation purposes for the above reason.
This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.
