Divisor

Un divisor es una línea delgada que agrupa el contenido en listas y contenedores.

La funcionalidad de los divisores en la interfaz de usuario se centra en la organización visual, la separación y la estructuración del contenido. Ayudan a crear jerarquía, agrupación y enfoque visual, mejoran la legibilidad y mantienen una estructura coherente en la interfaz. Los divisores contribuyen a una apariencia ordenada y facilitan la comprensión y la navegación del contenido.

Estas son algunas de las características y funcionalidades clave de los divisores:

Separación: Los divisores se utilizan para crear una separación visual entre diferentes secciones de contenido en una interfaz. Ayudan a delimitar visualmente áreas distintas y a proporcionar una estructura clara y ordenada.

Agrupación:Los divisores ayudan a establecer una jerarquía y agrupación visual del contenido. Pueden separar elementos relacionados y agruparlos visualmente, permitiendo que los usuarios identifiquen rápidamente las relaciones entre los diferentes elementos de la interfaz.

Legibilidad: Los divisores también pueden mejorar la legibilidad del contenido al proporcionar un espacio visualmente definido entre bloques de texto o elementos. Ayudan a evitar la confusión y la mezcla visual, facilitando la lectura y comprensión del contenido.

Atención: Los divisores pueden ser utilizados para enfocar la atención del usuario en un área o sección específica de la interfaz. Al separar visualmente una sección o elemento, se resalta su importancia y se dirige la atención del usuario hacia él.

Delimitación: Los divisores también pueden ser utilizados para delimitar elementos interactivos, como botones, enlaces o elementos de navegación. Al separar visualmente estos elementos, se hace más claro para el usuario que son elementos independientes y pueden ser seleccionados o accionados por separado.

Línea divisora horizontal

HTML

CSS

hr.divisor {
border-top: 1px solid rgba(0, 40, 70, 0.3);
margin: 10px 0;
width: 100%;
}

JS

Línea divisora vertical

HTML

CSS

hr.divisor-vertical {
border-left: 1px solid rgba(0, 40, 70, 0.3);
margin: 0px 10px;
height: 150px;
}