Figura

Un <figure> ata el pie a aquello que describe, cosa que un párrafo bajo una imagen no hace. Pasa src para el caso habitual, o hijos para cualquier otra cosa que merezca un pie.

Figura básica

figure({
  src: '/logo.svg',
  alt: 'El logotipo de sitelo',
  caption: 'El logotipo, tal como aparece en la barra superior.',
  style: '--su-figure-bg: var(--su-surface-2)',
})

Copiar

Con la proporción reservada

ratio envuelve la imagen en un aspectRatio(), así el pie nunca salta hacia abajo cuando la imagen carga.

grid({ min: '13rem' },
  figure({ src: '/logo.svg', alt: '', ratio: '16 / 9', caption: 'ratio: 16 / 9' }),
  figure({ src: '/logo.svg', alt: '', ratio: '1 / 1', caption: 'ratio: 1 / 1' }),
)

Copiar

Poner pie a otra cosa

Sin src, los hijos son el contenido de la figura.

figure({ caption: 'Tabla 1 — salida de una compilación por defecto.' },
  table({
    dense: true,
    columns: [{ key: 'file', header: 'Archivo' }, { key: 'size', header: 'Tamaño', align: 'end' }],
    rows: [
      { file: 'index.html', size: '4,1 kB' },
      { file: '404.html', size: '860 B' },
      { file: 'sitemap.xml', size: '155 B' },
    ],
  }),
)

Código con pie

Fíjate en la prop text de code(): en toda esta biblioteca los hijos se dibujan como HTML, así que una muestra con etiquetas necesita escaparse o el navegador la construye en vez de mostrarla.

figure({ caption: 'Una página de sitelo, entera.' },
  code({ text: 'export default () => "<h1>Hola</h1>"' }),
)

Texto alternativo

El atributo alt siempre se escribe, vacío si no das nada: una imagen sin alt se anuncia por su nombre de archivo, que es peor que el silencio. El pie no es un sustituto: el pie lo lee todo el mundo, el alt describe la imagen a quien no puede verla.

Cuando el pie ya dice todo lo que dice la imagen, alt: '' es la respuesta correcta.

En prosa

Las figuras que salen de un renderizador de Markdown ya las estiliza prose(). Este componente es para las figuras que construyes tú.

Props