Pruh čísel stats-band · light

Tmavý pruh se dvěma až čtyřmi velkými čísly (60 Black s přechodovou výplní) a popisky pod nimi, sloupce oddělené svislou linkou. Bez hlavičky sekce a bez CTA. Ve Figmě se rám jmenuje „numbers“. Na mobilu mřížka 2 × 2, od 1024 px všechny v řadě. Pozadí je výchozí tmavé; světlé je jen obranně ošetřené, v grafice není.

Pro integrátora: Hodnota je řetězec, ne číslo (mezery v tisících, „+“, jednotky jako „mil.“) a nezalamuje se — drž ji do zhruba 8 znaků; velikost písma se pod XL odvozuje ze šířky sloupce, takže delší hodnota může přetéct přes linku. Popisek je prostý text bez ručního zalomení. Položka bez hodnoty se nevypíše. Přístupné jméno seznamu dává volitelný klíč ariaLabel. Po objevení se číslo natočí od nuly na výslednou hodnotu (třída js-counter, modul components/counter); text okolo čísla a oddělovač tisíců zůstanou, desetinná hodnota ("2,5 mil.") se nenatáčí a stojí.

Zdroj: src/_includes/blocks/stats-band/

Varianta „default“

20 000

dokončených bytů
200

úspěšných rezidenčních projektů
3 200

bytů aktuálně ve výstavbě
40 000+

bytů v přípravě po celé Praze

Vzorová data (JSON)

{
  "settings": {
    "background": "dark"
  },
  "ariaLabel": "Central Group v číslech",
  "items": [
    {
      "value": "20 000",
      "label": "dokončených bytů"
    },
    {
      "value": "200",
      "label": "úspěšných rezidenčních projektů"
    },
    {
      "value": "3 200",
      "label": "bytů aktuálně ve výstavbě"
    },
    {
      "value": "40 000+",
      "label": "bytů v přípravě po celé Praze"
    }
  ]
}

Varianta „pomahame“

24+ mil.

pro Nadační fond pro zdraví dětí
200+

Podpořených zdravotnických programů
63 mil.

na pomoc s uprchlickou krizí z Ukrajiny
10+ mil.

pro zlepšení dostupnosti bydlení v ČR

Vzorová data (JSON)

{
  "settings": {
    "background": "dark"
  },
  "ariaLabel": "Naše pomoc v číslech",
  "items": [
    {
      "value": "24+ mil.",
      "label": "pro Nadační fond pro zdraví dětí"
    },
    {
      "value": "200+",
      "label": "Podpořených zdravotnických programů"
    },
    {
      "value": "63 mil.",
      "label": "na pomoc s uprchlickou krizí z Ukrajiny"
    },
    {
      "value": "10+ mil.",
      "label": "pro zlepšení dostupnosti bydlení v ČR"
    }
  ]
}

Varianta „three-items“

30+

let na trhu
20 000

dokončených bytů
40 000+

bytů v přípravě po celé Praze

Vzorová data (JSON)

{
  "settings": {
    "background": "dark"
  },
  "items": [
    {
      "value": "30+",
      "label": "let na trhu"
    },
    {
      "value": "20 000",
      "label": "dokončených bytů"
    },
    {
      "value": "40 000+",
      "label": "bytů v přípravě po celé Praze"
    }
  ]
}

Varianta „long-values“

1 250 000+

hraniční stav — hodnota delší než 8 znaků
24+ mil.

nejdelší hodnota z grafiky
7

jednociferná hodnota a velmi dlouhý popisek, který se musí zalomit na několik řádků bez přetečení sloupce
63 mil.

Vzorová data (JSON)

{
  "settings": {
    "background": "dark"
  },
  "items": [
    {
      "value": "1 250 000+",
      "label": "hraniční stav — hodnota delší než 8 znaků"
    },
    {
      "value": "24+ mil.",
      "label": "nejdelší hodnota z grafiky"
    },
    {
      "value": "7",
      "label": "jednociferná hodnota a velmi dlouhý popisek, který se musí zalomit na několik řádků bez přetečení sloupce"
    },
    {
      "value": "63 mil."
    }
  ]
}

Varianta „light“

20 000

dokončených bytů
200

úspěšných rezidenčních projektů

Vzorová data (JSON)

{
  "settings": {
    "background": "light"
  },
  "items": [
    {
      "value": "20 000",
      "label": "dokončených bytů"
    },
    {
      "value": "200",
      "label": "úspěšných rezidenčních projektů"
    }
  ]
}

Varianta „empty“

Vzorová data (JSON)

{
  "settings": {
    "background": "dark"
  },
  "items": [
    {
      "value": "",
      "label": "položka bez hodnoty se nevypíše"
    }
  ]
}