Counter Component

Counters are very useful when displaying stats or any numbers creating a positive effect over the target. Explore Vulk counters.

Components Open Docs
CounterBoldBoxedContent

Counter

Counter thin variation


<template>
  <Title tag="h3" :size="4" weight="thin" narrow>
    <Counter :number="79" />
  </Title>
</template>

Counter

Counter bold variation


<template>
  <Title tag="h3" :size="4" weight="bold" narrow>
    <Counter :number="79" />
  </Title>
</template>

Counter box

Counter variations


<template>
  <Card padding="2rem" class="counter-card">
    <Title tag="h3" :size="4" weight="bold" narrow>
      <Counter :number="194" />
    </Title>
  </Card>
</template>

Counter

Counter content variation

Pizzas eaten

Cones eaten

Hotdogs eaten

Apples eaten


<template>
  <div class="px-4 has-text-centered">
    <Icon icon="la:pizza-slice" :size="200" color="primary" />
    <Title tag="h3" :size="4" weight="bold" narrow>
      <Counter :number="194" />
    </Title>
    <p class="paragraph rem-95">Pizzas eaten</p>
  </div>
</template>