Comparison

Displays comparison block.

Frontmatter

blocks:
  - type: comparison
    heading: {} # (optional)
      surtitle: '' # string (optional)
      title: '' # string (optional)
      text: '' # markdown (optional)
    items: []
      badge: '' # string (optional)
      title: '' # string (optional)
      text: '' # string (optional)
      offer: {} # (optional)
        price: '' # float
        discount: '' # string, a value or a percentage (e.g. 10%) (optional)
        frequency: '' # string (optional)
        text: '' # string (optional)
      arguments: [] # (optional)
        icon: '' # string, icon name (optional)
        text: '' # string
      cta: {} # (optional)
        text: '' # string
        url: '' # url
        blank: false # boolean (optional)
        lang: '' # code lang, sets the hreflang attribute (optional)
      is_highlighted: false # boolean, adds .item-highlighted (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)

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

Demo visual renderer

Files

CMS availability

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