Figura

Un <figure> lega una didascalia a ciò che descrive, cosa che un paragrafo sotto un’immagine non fa. Passa src per il caso comune, oppure dei figli per qualunque altra cosa valga la pena accompagnare con una didascalia.

Figura di base

figure({
  src: '/logo.svg',
  alt: 'Il logotipo di sitelo',
  caption: 'Il logotipo, come compare nella barra in alto.',
  style: '--su-figure-bg: var(--su-surface-2)',
})

Copia

Con proporzioni tenute

ratio avvolge l’immagine in un aspectRatio(), così la didascalia non salta mai più in basso quando l’immagine si carica.

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' }),
)

Copia

Dare una didascalia ad altro

Senza src, i figli sono il contenuto della figura.

figure({ caption: 'Tabella 1 — output di una build predefinita.' },
  table({
    dense: true,
    columns: [{ key: 'file', header: 'File' }, { key: 'size', header: 'Dimensione', align: 'end' }],
    rows: [
      { file: 'index.html', size: '4,1 kB' },
      { file: '404.html', size: '860 B' },
      { file: 'sitemap.xml', size: '155 B' },
    ],
  }),
)

Codice con una didascalia

Nota la prop text su code(): in questa libreria i figli vengono renderizzati come HTML ovunque, quindi un esempio che contiene tag ha bisogno di essere sfuggito, altrimenti il browser lo costruisce invece di mostrarlo.

figure({ caption: 'Una pagina sitelo per intero.' },
  code({ text: 'export default () => "<h1>Ciao</h1>"' }),
)

Testo alternativo

L’attributo alt viene sempre scritto, vuoto se non dai nulla — un’immagine senza alcun alt viene annunciata con il nome del file, che è peggio del silenzio. Una didascalia non è un sostituto: la didascalia la leggono tutti, l’alt descrive l’immagine a chi non può vederla.

Quando la didascalia dice già tutto quello che dice l’immagine, alt: '' è la risposta giusta.

Nella prosa

Le figure che escono da un renderer Markdown sono già stilizzate da prose(). Questo componente è per le figure che costruisci tu.

Props