Dividers

Tipos

Horizontal

Usamos los divisores horizontales para separar entre objetos, componentes o contenido.

Dividers

Shared Design System

Code

Html

            
              <div class="divider --lg"></div>

UI Notes Puedes utilizar diferentes tamaños de espaciado con las clases modificadoras predefinidas, o crear espaciados personalizados usando las clases utilitarias para márgenes.

Vertical

Usamos los divisores verticales para separar entre elementos repetitivos o separar conceptos.

Code

Agregar

Html

            
              <div class="divider --sm --vertical"></div>

Estilos

Dashed

Code

Html

            
              <div class="divider --lg --dashed"></div>

Especial

Cuando queremos enfatizar la distinción entre dos opciones dentro del mismo flujo o acción.

Code

Html

            
              <div class="divider --lg --text" data-text="<%= t('globals.or') %>"></div>

Dot

Cuando queremos separar entre textos que guardan relación.

Al ser un elemento muy pequeño, el espaciado lo puedes asignar con clases utilitarias para los márgenes.

Code

154m²

Html

            
              <div class="divider --dot"></div>

Configuración

Resumen

Tabla con todos los modificadores contextuales disponibles para el componente Dividers. Los modificadores de tamaño, color y orientación pueden combinarse entre sí.

Tipo	Modificador	Margenes
Tamaño¹	--xxs	Espaciado 4px
	--xs	Espaciado 8px
	--sm	Espaciado 16px
		Espaciado 24px
	--lg	Espaciado 32px
	--xl	Espaciado 48px
	--xxl	Espaciado 80px
Estilo	--dashed	Borde estilo punteado
	--text	Texto añadido dependiendo del idioma
	--dot	Separación vertical con estilo circular
Orientación	--vertical-xs	Altura fija de 12px y espaciado horizontal
	--vertical-sm	Altura fija de 16px y espaciado horizontal
	--vertical	Altura fija de 24px y espaciado horizontal
	--vertical-lg	Altura fija de 32px y espaciado horizontal
Color	--dark	Versión oscura del separador

¹ El tamaño aplica para orientación horizontal o vertical.