Figure

Displays a centered figure image with legend and credit.

Frontmatter

blocks:
  - type: figure
    heading: {} # (optional)
      surtitle: '' # string (optional)
      title: '' # string (optional)
      text: '' # markdown (optional)
    figure: {}
      src: '' # url
      alt: '' # string
      filter: '' # [Box, Lanczos, CatmullRom, Linear] (optional)
      legend: '' # string (optional)
      credit: '' # markdown (optional)
      screenshot: false # boolean, frames the image in a fake browser (optional)
      link: '' # url, wraps the image in a link (optional)
    ui: {} # (optional)
      theme: '' # [accent, black, dark, highlight, light, neutral, white] (optional)
      grid: '' # [xsmall, small, medium, large, container, full] (optional)
      offset: '' # [start, center, end] (optional)
      align: '' # [start, center, end] (optional)

The image is sized from the block’s own ui.grid: it spans the full grid width on desktop and goes edge to edge on mobile.

See Common keys for heading, footing and the full ui reference.

Params

/config/_default/params.yaml

Mobile image width, when the default container width does not suit.

params:
  blocks:
    figure:
      mobile: 336 # number, in pixels

Demo visual renderer

Files

CMS availability

CMS	Hugolify Admin v2
CloudCannon	Available
Decap CMS	Available
Netlify CMS	Available
Pages CMS	Available
Static CMS	Available
Sveltia CMS	Available
Tina CMS	Available