Datas

Displays datas with gauges or not in column.

Frontmatter

blocks:
  - type: datas
    heading: {} # (optional)
      surtitle: '' # string (optional)
      title: '' # string (optional)
      text: '' # markdown (optional)
    show_gauge: false # boolean, renders each value as a gauge (optional)
    show_color: false # boolean, colours the gauge by its value (optional)
    items: []
      prefix: '' # string (optional)
      value: '' # number
      suffix: '' # string (optional)
      limit: 100 # number, the gauge maximum (optional)
      title: '' # string (optional)
      text: '' # markdown (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)
      column: 3 # number, columns per row on desktop (optional)
      scrollsnap: '' # [none, sm, md, lg, xl, all] or object (optional)

limit is only read when show_gauge is on: it is the value the gauge fills up to.

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

Demo visual renderer

Files

ModuleFiles
hugolify-themeTemplate , Sub-templates
hugolify-adminBlock type , Fields
hugolify-example-blocksDemo content

Styling availability

ModuleAvailabilityFiles
hugolify-theme-bootstrapAvailableSASS , JS
hugolify-theme-design-systemAvailableCSS , JS

CMS availability

CMSHugolify Admin v2
CloudCannonAvailable
Decap CMSAvailable
Netlify CMSAvailable
Pages CMSAvailable
Static CMSAvailable
Sveltia CMSAvailable
Tina CMSAvailable