Divider

La línea fina que separa dos partes, cuando el espacio por sí solo no es suficiente.

En esta página

Playground

Arriba

Abajo

Tono

Dirección

Fondo

HTML

<div class="feitio-stack" data-gap="3" style="inline-size: min(100%, 24rem)"><span>Arriba</span><hr class="feitio-divider"><span>Abajo</span></div>

Cuándo usarlo

Entre las partes que se tocan y necesitan un límite: el pie de página y la página, el encabezado de una tabla y sus filas.

Cuándo no usarlo

Entre secciones de texto: el espacio ya separa; una línea extra es ruido.
Para marcar un espacio vacío: eso es la línea punteada.

Ejemplos

Above

In the middle

Below

Línea fina y tinta

La línea fina, en el color de la línea, para casi todo; la tinta, para un límite fuerte, como debajo del encabezado de una tabla.

Mostrar código

HTML

<hr class="feitio-divider">
<hr class="feitio-divider" data-tone="ink">

Vertical

Entre piezas lado a lado, de la altura de la fila: aquí separa un grupo de acciones de las demás.

Mostrar código

HTML

<div class="feitio-inline" data-gap="3">
  <button type="button" class="feitio-button" data-size="small">Editar</button>
  <button type="button" class="feitio-button" data-size="small">Duplicar</button>
  <hr class="feitio-divider" aria-orientation="vertical">
  <button type="button" class="feitio-button" data-size="small" data-variant="danger">Apagar</button>
</div>

Reglas

Sin margen propio: el espacio alrededor viene del Stack que lo contiene.
1px, siempre; nunca una banda gruesa.

Atributos

Atributo	Valores	Para qué sirve
`class="feitio-divider"`	sobre el `<hr>`	La línea fina.
`data-tone="ink"`	opcional	La línea de tinta, para un límite fuerte.