Pie de página

Un pie de página es una cuadrícula de columnas que se autoajusta, más una línea inferior opcional que siempre ocupa todo el ancho, haya las columnas que haya.

Se exporta como footer y como siteFooter, porque footer es también el elemento <footer> de javascript-to-html e importar ambos con un solo nombre es un error de sintaxis.

Pie básico

footer(
  footerColumn({ title: 'Documentación' },
    '<a href="/es/docs">Primeros pasos</a>',
    '<a href="/es/docs/routing">Rutas</a>',
    '<a href="/es/docs/data">Carga de datos</a>',
  ),
  footerColumn({ title: 'Componentes' },
    '<a href="/es/ui">Resumen</a>',
    '<a href="/es/ui/button">Botón</a>',
    '<a href="/es/ui/card">Tarjeta</a>',
  ),
  footerColumn({ title: 'Proyecto' },
    '<a href="https://github.com/paul-browne/sitelo">GitHub</a>',
    '<a href="https://www.npmjs.com/package/sitelo">npm</a>',
  ),
)

Con línea inferior

footerBottom() abarca todas las columnas, así que sigue siendo una fila a todo lo ancho haga lo que haga la cuadrícula de arriba.

footer(
  footerColumn({ title: 'Documentación' }, '<a href="/es/docs">Guía</a>', '<a href="/es/ui">Componentes</a>'),
  footerColumn({ title: 'Ejemplos' }, '<a href="/es/examples">Todos los ejemplos</a>'),
  footerBottom(
    text({ variant: 'caption' }, '© 2026 Paul Browne · MIT'),
    stack({ direction: 'row', gap: 'sm' },
      chip({ size: 'sm', color: 'neutral' }, 'v2.7'),
      chip({ size: 'sm', color: 'success', dot: true }, 'Compilación correcta'),
    ),
  ),
)

Una columna de marca

Una columna no tiene por qué ser de enlaces. Todo lo que pases como hijo de footer() en vez de una columna ocupa su propia celda en la cuadrícula.

footer(
  div(
    stack({ gap: 'sm' },
      text({ variant: 'h5', as: 'div' }, 'sitelo'),
      text({ variant: 'small', tone: 'muted' }, 'Generación de sitios estáticos sin configuración, sobre Vite.'),
    ),
  ),
  footerColumn({ title: 'Documentación' }, '<a href="/es/docs">Guía</a>', '<a href="/es/ui">Componentes</a>'),
  footerColumn({ title: 'Proyecto' }, '<a href="#">GitHub</a>', '<a href="#">npm</a>'),
)

Columnas fijas

Por defecto las columnas se autoajustan. columns admite cualquier valor de grid-template-columns cuando quieres una forma concreta: una columna de marca ancha y dos columnas estrechas de enlaces, por ejemplo.

footer({ columns: '2fr 1fr 1fr' },
  div(text({ variant: 'small', tone: 'muted' }, 'Una primera columna más ancha para la marca y una frase sobre ella.')),
  footerColumn({ title: 'Documentación' }, '<a href="/es/docs">Guía</a>'),
  footerColumn({ title: 'Más' }, '<a href="/es/examples">Ejemplos</a>'),
)

Solo la línea inferior

footer(
  footerBottom(text({ variant: 'caption' }, '© 2026 · Hecho con sitelo')),
)

Props

footer():

Prop	Tipo	Por defecto	Descripción
`columns`	`string`	—	Un valor de grid-template-columns. Se autoajusta si se omite.
`as`	`string`	`'footer'`	Elemento que se renderiza.

Parte	Props	Por defecto	Descripción
`footerColumn`	`title`	—	Una columna con título; los hijos pasan a ser una lista de enlaces.
`footerBottom`		—	Fila a todo lo ancho bajo las columnas.