UHasselt Component Library

Counter 

<div class="counter">
    <div class="uhasselt-container">
        <div class="wrapper">
            <div class="count">
                <div class="count-top">
                    <div class="top-content" data-target="6500"></div>
                </div>
                <div class="count-contents">
                    <span class="icon fal fa-user-graduate   " aria-hidden="true"></span>
                    <div class="text">Studenten</div>
                </div>
            </div>
            <div class="count">
                <div class="count-top">
                    <div class="top-content" data-target="650"></div>
                </div>
                <div class="count-contents">
                    <span class="icon fal fa-folder   " aria-hidden="true"></span>
                    <div class="text">Onderzoekers &amp; medewerkers</div>
                </div>
            </div>
            <div class="count">
                <div class="count-top">
                    <div class="top-content" data-target="65"></div>
                </div>
                <div class="count-contents">
                    <span class="icon fal fa-graduation-cap   " aria-hidden="true"></span>
                    <div class="text">Doctoraatstudenten</div>
                </div>
            </div>
            <div class="count">
                <div class="count-top">
                    <div class="top-content" data-target="60"></div>
                </div>
                <div class="count-contents">
                    <span class="icon fal fa-university   " aria-hidden="true"></span>
                    <div class="text">Faculteiten</div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="counter">
    <div class="uhasselt-container">
        <div class="wrapper">
            {{#each items}}
                <div class="count">
                    <div class="count-top">
                        {{#if number}}<div class="top-content" data-target="{{ number }}"></div>{{/if}}
                    </div>
                    <div class="count-contents">
                        {{#if icon}}{{ render '@icon' icon }}{{/if}}
                        {{#if icon}}<div class="text">{{ text }}</div>{{/if}}
                    </div>
                </div>
            {{/each}}
        </div>
    </div>
</div>
 
{
  "modifier": "",
  "items": [
    {
      "text": "Studenten",
      "number": "6500",
      "icon": {
        "style": "fal",
        "icon": "fa-user-graduate"
      }
    },
    {
      "text": "Onderzoekers & medewerkers",
      "number": "650",
      "icon": {
        "style": "fal",
        "icon": "fa-folder"
      }
    },
    {
      "text": "Doctoraatstudenten",
      "number": "65",
      "icon": {
        "style": "fal",
        "icon": "fa-graduation-cap"
      }
    },
    {
      "text": "Faculteiten",
      "number": "60",
      "icon": {
        "style": "fal",
        "icon": "fa-university"
      }
    }
  ]
}
  • Content: 
    .counter {
    @apply mt-8 mb-16 py-8 md:p-0 bg-gray-200 md:bg-transparent;

    .wrapper {
        @apply grid gap-4 md:gap-8;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

        @screen md {
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        }

        @screen lg {
            grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
        }

        .count {
            @apply relative box-border p-4 my-2 md:p-8 md:my-4 border-solid border-4 border-t-0 border-black;

            .count-top {
                @apply flex flex-row w-full absolute top-0 left-0;

                &:before {
                    content: '';
                    @apply h-1 block border-solid border-4 border-t-0 border-black;
                    flex: 1 0 0;
                }

                &:after {
                    content: '';
                    @apply h-1 block border-solid border-4 border-t-0 border-black;
                    flex: 1 0 0;
                }
            }

            .top-content {
                @apply -mt-4 md:-mt-8 text-center overflow-hidden text-lg md:text-xl font-semibold;
                flex: 0 0 70%;
            }

            .count-contents {
                @apply mt-2 md:mt-12 flex flex-col text-center;
                min-height: 140px;
                justify-content: center;
                align-items: center;
                align-content: center;

                .icon {
                    @apply text-red text-lg md:text-xl;
                    font-size: 48px;
                    line-height: 64px;
                }

                .text {
                    @apply flex justify-center items-center md:h-20 min-h-full text-sm md:text-md;
                }
            }
        }
    }
}
  • URL: /components/raw/counter/counter.css
  • Filesystem Path: src\components\03-molecules\counter\counter.css
  • Size: 1.9 KB
  • Content: 
    (function () {


    'use strict';

    const counters = document.querySelectorAll(".top-content");

    counters.forEach((counter) => {

        counter.innerText = "0";

        const updateCounter = () => {

            const target = +counter.getAttribute("data-target");
            const count = +counter.innerText;
            const increment = target / 500;

            if (count < target) {

                counter.innerText = `${Math.ceil(count + increment)}`;
                setTimeout(updateCounter, 1);

            } else {
                
                counter.innerText = target;
            }
        };
        
        updateCounter();
    });

})();
  • URL: /components/raw/counter/counter.js
  • Filesystem Path: src\components\03-molecules\counter\counter.js
  • Size: 706 Bytes

No notes defined.