Dividers

Un divider es una linea fina que agrupa el contenido en listas y layouts. Su función es separar el contenido en grupos claros.

Variaciones y tipos

Diferenciamos tres tipos: High contrast y Low contrast. Se utiliza uno u otro en función del color de fondo sobre el que se aplica.

Demo en vivo

High Contrast


Low Contrast


<p class="rds-title-2 rds-mb-l03">High Contrast</p>
<hr class="rds-divider rds-mb-l03">
<p class="rds-title-2 rds-mb-l03">Low Contrast</p>
<hr class="rds-divider rds-divider--low rds-mb-l03">

Comportamiento

Los dividers deben cumplir unos principios básicos en su comportamiento:

  • Delicados
    Notables en el diseño pero no discordantes.
  • Secundarios
    Únicamente se deben utilizar si los elementos no pueden ser separados mediante espacios en blanco.
  • Poco frecuentes
    Se deben usar con moderación, para crear agrupaciones más que para separar elementos.