---
layout: components
title: Counters
---

<!-- Hero and nav -->
<div class="hero is-relative is-theme-primary">
  {{> navbar-static-light}}

  <!-- Hero image -->
  <div id="main-hero" class="hero-body">
    <div class="container has-text-centered">
      <div class="columns is-vcentered">
        <div class="column is-4 is-offset-1 has-text-left">
          <h1 class="title components-title is-1">Counters</h1>
          <h2 class="subtitle is-4 components-subtitle">
            Animated counters variations.
          </h2>
          <p class="components-cta">
            <a
              href="#icon-bg"
              class="
                button button-cta
                btn-align
                light-btn
                btn-outlined
                is-bold
                rounded
              "
            >
              Get Started
            </a>
          </p>
        </div>
        <div class="column is-offset-1 has-text-centered is-hidden-mobile">
          <div id="counters-ill" class="vivus-svg"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Icon bg counter -->
<div id="icon-bg" class="section is-medium">
  <div class="container">
    <div class="section-title-wrapper">
      <div class="bg-number">1</div>
      <h2 class="title section-title has-text-centered dark-text text-bold">
        Icon Background
      </h2>
    </div>

    <div class="content-wrapper">
      <!-- Counters -->
      <div class="columns is-vcentered has-text-centered">
        <div class="column is-4">
          <div class="simple-counter">
            <div class="counter counter-number is-bold">1847</div>
            <div class="counter-text">teams use our product</div>
            <div class="background-icon">
              <i class="fa fa-suitcase"></i>
            </div>
          </div>
        </div>
        <div class="column is-4">
          <div class="simple-counter">
            <div class="counter counter-number is-bold">2360</div>
            <div class="counter-text">meetings every day</div>
            <div class="background-icon">
              <i class="fa fa-building"></i>
            </div>
          </div>
        </div>
        <div class="column is-4">
          <div class="simple-counter">
            <div class="counter counter-number is-bold">4972</div>
            <div class="counter-text">addons sold</div>
            <div class="background-icon">
              <i class="fa fa-puzzle-piece"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Card counter -->
<div id="numbers-2" class="section section-feature-grey is-medium">
  <div class="container">
    <div class="section-title-wrapper">
      <div class="bg-number">2</div>
      <h2 class="title section-title has-text-centered dark-text text-bold">
        Hover cards
      </h2>
    </div>

    <div class="content-wrapper">
      <!-- Counters -->
      <div class="columns is-vcentered has-text-centered">
        <div class="column is-3">
          <div class="card-counter">
            <div class="flex-card light-bordered hover-inset">
              <div class="round-icon">
                <i class="material-icons">face</i>
              </div>
              <div class="counter counter-number text-bold">528</div>
              <div class="counter-text">Active users</div>
            </div>
          </div>
        </div>
        <div class="column is-3">
          <div class="card-counter">
            <div class="flex-card light-bordered hover-inset">
              <div class="round-icon">
                <i class="material-icons">insert_drive_file</i>
              </div>
              <div class="counter counter-number text-bold">150000</div>
              <div class="counter-text">Files shared</div>
            </div>
          </div>
        </div>
        <div class="column is-3">
          <div class="card-counter">
            <div class="flex-card light-bordered hover-inset">
              <div class="round-icon">
                <i class="material-icons">cloud_download</i>
              </div>
              <div class="counter counter-number text-bold">8924</div>
              <div class="counter-text">Product downloads</div>
            </div>
          </div>
        </div>
        <div class="column is-3">
          <div class="card-counter">
            <div class="flex-card light-bordered hover-inset">
              <div class="round-icon">
                <i class="material-icons">attach_file</i>
              </div>
              <div class="counter counter-number text-bold">993</div>
              <div class="counter-text">Attachments uploaded</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Icon counter -->
<div class="section is-medium">
  <div class="container">
    <div class="section-title-wrapper">
      <div class="bg-number">3</div>
      <h2 class="title section-title has-text-centered dark-text text-bold">
        Icon counters
      </h2>
    </div>

    <div class="content-wrapper">
      <!-- Counters -->
      <div class="columns is-vcentered has-text-centered">
        <div class="column is-4">
          <div class="icon-counter">
            <div class="counter-icon">
              <i class="im im-icon-Diamond"></i>
            </div>
            <div class="counter counter-number text-bold">6851</div>
            <div class="counter-text">Available ressources</div>
          </div>
        </div>
        <div class="column is-4">
          <div class="icon-counter">
            <div class="counter-icon">
              <i class="im im-icon-Embassy"></i>
            </div>
            <div class="counter counter-number text-bold">463</div>
            <div class="counter-text">Collaborative projects</div>
          </div>
        </div>
        <div class="column is-4">
          <div class="icon-counter">
            <div class="counter-icon">
              <i class="im im-icon-Envelope"></i>
            </div>
            <div class="counter counter-number text-bold">18000</div>
            <div class="counter-text">Monthly emails</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Icon counter -->
<div
  class="section is-medium parallax is-cover is-relative"
  data-background="https://via.placeholder.com/1920x1397"
  data-color="#837FCB"
  data-color-opacity="0.5"
  data-demo-background="assets/img/demo/woman-ipad.jpg"
>
  <div class="container">
    <div class="section-title-wrapper">
      <div class="bg-number">4</div>
      <h2 class="title section-title has-text-centered light-text text-bold">
        Parallax counters
      </h2>
    </div>

    <div class="content-wrapper">
      <!-- Counters -->
      <div class="columns is-vcentered has-text-centered">
        <div class="column is-4">
          <div class="parallax-counter">
            <div class="counter-icon">
              <i class="im im-icon-Diamond"></i>
            </div>
            <div class="counter counter-number text-bold">6851</div>
            <div class="counter-text">Available ressources</div>
          </div>
        </div>
        <div class="column is-4">
          <div class="parallax-counter">
            <div class="counter-icon">
              <i class="im im-icon-Embassy"></i>
            </div>
            <div class="counter counter-number text-bold">463</div>
            <div class="counter-text">Collaborative projects</div>
          </div>
        </div>
        <div class="column is-4">
          <div class="parallax-counter">
            <div class="counter-icon">
              <i class="im im-icon-Envelope"></i>
            </div>
            <div class="counter counter-number text-bold">18000</div>
            <div class="counter-text">Monthly emails</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{{> footer-light}}