Blog / Volver

separator

component

Línea SVG horizontal con propiedades personalizables de clase, ancho, altura y espacio entre guiones.

---
import Separator from '../code/astro/Separator.astro';
---

  <Separator
    class='my-8 w-full [--gapLine:10] [--heightLine:1] [--widthLine:10]'
  />

  <Separator
    class='my-8 w-4/5 [--gapLine:10] [--heightLine:1] [--widthLine:20]'
  />

  <Separator
    class='my-8 w-3/5 [--gapLine:40] [--heightLine:1] [--widthLine:20]'
  />

  <Separator
    class='my-8 w-2/5 [--gapLine:20] [--heightLine:5] [--widthLine:20]'
  />

PROPS

  • --gapLine: Define el espacio entre las líneas del separador
  • --heightLine: Controla la altura de las líneas del separador
  • --widthLine: Establece el ancho de las líneas del separador