Divisor

Un componente divisor, también conocido como un separador, es un elemento de interfaz de usuario que se utiliza para dividir o separar distintos contenidos o secciones en una página web o aplicación móvil.

Vista Previa

Figma

Usos

Los componentes divisores se presentan comúnmente como líneas horizontales o verticales que ocupan un espacio limitado en la pantalla y pueden tener un ancho y un alto determinados. Se utilizan a menudo para crear un contraste visual entre distintos bloques de contenido y para mejorar la navegación y la organización del contenido. Los componentes divisores también pueden tener estilos de diseño personalizados, como colores, bordes y sombras, para destacarse del resto del contenido y llamar la atención del usuario.

Cuándo usar

Dividir distintas secciones de una página web o aplicación móvil: Los componentes divisores pueden utilizarse para dividir el contenido de una página en secciones separadas y claramente definidas. Esto puede ayudar a mejorar la organización y la legibilidad del contenido.

Crear un contraste visual: Los componentes divisores pueden utilizarse para crear un contraste visual entre distintos bloques de contenido, lo que puede ayudar a guiar la atención del usuario y a mejorar la experiencia de usuario.

Separar elementos de una lista: Los componentes divisores pueden utilizarse para separar elementos de una lista, lo que puede mejorar la legibilidad y la organización del contenido.

Separar elementos de un formulario: Los componentes divisores pueden utilizarse para separar distintos campos de un formulario, lo que puede mejorar la legibilidad y facilitar la rellenación del formulario por parte del usuario.

Crear un efecto visual atractivo: Los componentes divisores pueden utilizarse para crear un efecto visual atractivo y llamar la atención del usuario, especialmente si se utilizan estilos de diseño personalizados.

Comportamiento

Orientación

Horizontal

Vertical

Color

Visualización del componente divisor suave

Soft

Visualización del componente divisor duro

Hard

Visualización del componente divisor oscuro

Dark

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

El divider no representa una ruptura temática y no tiene un significado semántico para la tecnología de asistencia.

El divider solo debe usarse con fines de presentación debido a la razón anterior.