---
isPage: true
draft: false
title: Datas
description: Add some datas in columns (with gauge or not)
icon: percent
hero:
  surtitle: Blocks
  title: Blocks datas
  text: Add some datas in columns (with gauge or not).
  ctas:
    - text: Documentation
      url: https://www.hugolify.io/docs/blocks/datas/
      blank: true
    - text: Page code on Github
      url: https://raw.githubusercontent.com/Hugolify/hugolify-example-site/refs/heads/main/content/docs/datas.md
      blank: true
blocks:
  - type: datas
    column: 3
    background: false
    heading:
      title: With gauge and automatic color
      text: Maecenas semper urna enim, viverra faucibus tellus bibendum sed
    items:
      - text: Maecenas semper urna enim, viverra faucibus tellus bibendum sed
        title: Faucibus
        value: 90
        prefix: ''
        suffix: '%'
        limit: 100
      - value: 45
        title: Quisque consectetur
        text: Mauris convallis ante eu nisl iaculis efficitur. Pellentesque vel
          fringilla nunc.
        suffix: '%'
        limit: 100
      - value: 66
        title: Morbi placerat erat
        text:
          Proin sagittis faucibus tortor, rutrum facilisis erat volutpat ut. Etiam
          porta sapien eu tellus ornare tincidunt.
        limit: 100
        suffix: '%'
    show_color: true
    show_gauge: true
  - type: datas
    column: 3
    background: false
    heading:
      title: With gauge
      text: Maecenas semper urna enim, viverra faucibus tellus bibendum sed
    items:
      - text: Maecenas semper urna enim, viverra faucibus tellus bibendum sed
        title: Faucibus
        value: 900
        prefix: '+'
        suffix: '€'
        limit: 1000
      - value: 200000
        title: Quisque consectetur
        text: Mauris convallis ante eu nisl iaculis efficitur. Pellentesque vel
          fringilla nunc.
        limit: 250000
      - value: 3.5
        suffix: 'K'
        prefix: '$'
        title: Morbi placerat erat
        text:
          Proin sagittis faucibus tortor, rutrum facilisis erat volutpat ut. Etiam
          porta sapien eu tellus ornare tincidunt.
        limit: 100
    show_color: false
    show_gauge: true
  - type: datas
    column: 3
    background: false
    heading:
      title: Without gauges
      text: Maecenas semper urna enim, viverra faucibus tellus bibendum sed
    items:
      - text: Maecenas semper urna enim, viverra faucibus tellus bibendum sed
        title: Faucibus
        value: 900
        prefix: '+'
        suffix: '€'
        limit: 1000
      - value: 200000
        title: Quisque consectetur
        text: Mauris convallis ante eu nisl iaculis efficitur. Pellentesque vel
          fringilla nunc.
        limit: 250000
      - value: 3.5
        suffix: 'K'
        prefix: '$'
        title: Morbi placerat erat
        text:
          Proin sagittis faucibus tortor, rutrum facilisis erat volutpat ut. Etiam
          porta sapien eu tellus ornare tincidunt.
        limit: 100
    show_color: false
    show_gauge: false
  - type: datas
    column: 4
    background: false
    heading:
      title: Without gauges
      text: Maecenas semper urna enim, viverra faucibus tellus bibendum sed
    items:
      - text: Maecenas semper urna enim, viverra faucibus tellus bibendum sed
        title: Faucibus
        value: 900
        prefix: '+'
        suffix: '€'
        limit: 1000
      - value: 200000
        title: Quisque consectetur
        text: Mauris convallis ante eu nisl iaculis efficitur. Pellentesque vel
          fringilla nunc.
        limit: 250000
      - value: 3.5
        suffix: 'K'
        prefix: '$'
        title: Morbi placerat erat
        text:
          Proin sagittis faucibus tortor, rutrum facilisis erat volutpat ut. Etiam
          porta sapien eu tellus ornare tincidunt.
        limit: 100
      - value: 390
        suffix: 'K'
        prefix: '$'
        title: Morbi placerat erat
        text:
          Proin sagittis faucibus tortor, rutrum facilisis erat volutpat ut. Etiam
          porta sapien eu tellus ornare tincidunt.
        limit: 100
    show_color: false
    show_gauge: false
---