Figura

Uma <figure> liga a legenda àquilo que descreve, coisa que um parágrafo por baixo de uma imagem não faz. Passa src para o caso comum, ou filhos para tudo o resto que mereça legenda.

Figura básica

figure({
  src: '/logo.svg',
  alt: 'A marca escrita do sitelo',
  caption: 'A marca escrita, tal como aparece na barra de topo.',
  style: '--su-figure-bg: var(--su-surface-2)',
})

Copiar

Com proporção guardada

ratio envolve a imagem num aspectRatio(), para que a legenda nunca salte página abaixo quando a imagem carrega.

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

Legendar outra coisa

Sem src, os filhos são o conteúdo da figura.

figure({ caption: 'Tabela 1 — saída de uma construção predefinida.' },
  table({
    dense: true,
    columns: [{ key: 'file', header: 'Ficheiro' }, { key: 'size', header: 'Tamanho', align: 'end' }],
    rows: [
      { file: 'index.html', size: '4,1 kB' },
      { file: '404.html', size: '860 B' },
      { file: 'sitemap.xml', size: '155 B' },
    ],
  }),
)

Código com legenda

Repara na prop text do code(): em toda esta biblioteca os filhos são renderizados como HTML, por isso um exemplo com etiquetas precisa de ser escapado ou o navegador constrói-o em vez de o mostrar.

figure({ caption: 'Uma página sitelo inteira.' },
  code({ text: 'export default () => "<h1>Olá</h1>"' }),
)

Texto alternativo

O atributo alt é sempre escrito, vazio se não deres nada — uma imagem sem alt nenhum é anunciada pelo nome do ficheiro, o que é pior do que o silêncio. A legenda não substitui: a legenda é lida por toda a gente, o alt descreve a imagem a quem não a consegue ver.

Quando a legenda já diz tudo o que a imagem diz, alt: '' é a resposta certa.

Em texto corrido

As figuras que saem de um renderizador de Markdown já são estilizadas pelo prose(). Este componente é para as figuras que constróis tu.

Props