Section reference › Content

Stats / counters "type": "stats"

A row of big numbers that count up when they scroll into view, each with a label and optional icon. Use it to show key figures such as years in business, clients served or results achieved.

Example#

Paste this into the sections list of a page file:

{
  "type": "stats",
  "style": "divided",
  "tone": "primary",
  "items": [
    {
      "number": "12",
      "suffix": "+",
      "label": "Years in business"
    },
    {
      "number": "850",
      "label": "Projects delivered"
    },
    {
      "number": "98",
      "suffix": "%",
      "label": "Client satisfaction"
    },
    {
      "number": "$2.4M",
      "label": "Raised for clients"
    }
  ]
}

Options#

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in items#

Variants and styles#

plain#

Default. Just the numbers and labels.

{
  "type": "stats",
  "style": "plain",
  "items": [
    {
      "number": "12",
      "suffix": "+",
      "label": "Years in business"
    },
    {
      "number": "850",
      "label": "Projects delivered"
    },
    {
      "number": "98",
      "suffix": "%",
      "label": "Client satisfaction"
    },
    {
      "number": "$2.4M",
      "label": "Raised for clients"
    }
  ]
}

boxed#

Each figure in its own card.

{
  "type": "stats",
  "style": "boxed",
  "tone": "alt",
  "items": [
    {
      "number": "12",
      "suffix": "+",
      "label": "Years in business",
      "icon": "award"
    },
    {
      "number": "850",
      "label": "Projects delivered",
      "icon": "briefcase"
    },
    {
      "number": "98",
      "suffix": "%",
      "label": "Client satisfaction",
      "icon": "emoji-smile"
    },
    {
      "number": "$2.4M",
      "label": "Raised for clients",
      "icon": "graph-up-arrow"
    }
  ]
}

divided#

Thin vertical lines between the figures (large screens). Looks great on a coloured band.

{
  "type": "stats",
  "style": "divided",
  "tone": "primary",
  "items": [
    {
      "number": "12",
      "suffix": "+",
      "label": "Years in business"
    },
    {
      "number": "850",
      "label": "Projects delivered"
    },
    {
      "number": "98",
      "suffix": "%",
      "label": "Client satisfaction"
    },
    {
      "number": "$2.4M",
      "label": "Raised for clients"
    }
  ]
}

Tips#

• Use 3 or 4 figures; with 4 on phones you get two neat rows of two.
• Write numbers without spaces ("2,400" or "2400", not "2 400").
• Visitors who turn off animations in their system settings see the final numbers straight away.

Editing it in the HTML files#

Each figure is a .stat. The animated number is the span with data-count: the script counts up to the data-count value, so change that attribute (not the "0" inside the span). The label is .stat-label.

Where it's used#

Open these pages in template/ to see it working:

• Creative Agency: template/creative-agency/index.html (source src/demos/creative-agency/pages/index.json)
• Real Estate: template/real-estate/about.html (source src/demos/real-estate/pages/about.json)
• Corporate: template/corporate/about.html (source src/demos/corporate/pages/about.json)
• Finance: template/finance/about.html (source src/demos/finance/pages/about.json)
• Law Firm: template/law-firm/about.html (source src/demos/law-firm/pages/about.json)
• SaaS Product: template/saas/customers.html (source src/demos/saas/pages/customers.json)
• Mobile App: template/mobile-app/about.html (source src/demos/mobile-app/pages/about.json)
• Tech Conference: template/conference/about.html (source src/demos/conference/pages/about.json)
• Online Academy: template/education/index.html (source src/demos/education/pages/index.json)
• Restaurant: template/restaurant/about.html (source src/demos/restaurant/pages/about.json)
• Coffee Shop: template/cafe/home-2.html (source src/demos/cafe/pages/home-2.json)
• Hotel & Resort: template/hotel/index.html (source src/demos/hotel/pages/index.json)
• Wedding: template/wedding/about.html (source src/demos/wedding/pages/about.json)
• Gym & Fitness: template/gym/index.html (source src/demos/gym/pages/index.json)
• Yoga Studio: template/yoga/home-2.html (source src/demos/yoga/pages/home-2.json)
• Day Spa & Salon: template/spa/about.html (source src/demos/spa/pages/about.json)
• Medical Clinic: template/medical/home-2.html (source src/demos/medical/pages/home-2.json)
• Dental Clinic: template/dental/about.html (source src/demos/dental/pages/about.json)
• Pet Care: template/pet-care/about.html (source src/demos/pet-care/pages/about.json)
• Construction: template/construction/about.html (source src/demos/construction/pages/about.json)
• Car Dealer: template/car-dealer/about.html (source src/demos/car-dealer/pages/about.json)
• Travel Agency: template/travel/about.html (source src/demos/travel/pages/about.json)
• Photographer: template/photography/awards.html (source src/demos/photography/pages/awards.json)
• Architecture Studio: template/architecture/awards.html (source src/demos/architecture/pages/awards.json)
• Interior Design: template/interior-design/about.html (source src/demos/interior-design/pages/about.json)
• Portfolio: template/portfolio/index.html (source src/demos/portfolio/pages/index.json)
• Music Festival: template/music-festival/index.html (source src/demos/music-festival/pages/index.json)
• Fashion Store: template/fashion-store/about.html (source src/demos/fashion-store/pages/about.json)
• Charity: template/charity/home-2.html (source src/demos/charity/pages/home-2.json)
• Logistics: template/logistics/case-studies.html (source src/demos/logistics/pages/case-studies.json)