Counter

Animated number that counts up when visible.
---
block:
  _bookshop_name: elements/counter
  number: 100
  prefix: $
  suffix: +
  options:
    size: 6xl
    weight: bold
    align: center
    case: null
    decoration: null
    duration: 500
    starting_value: 50
    margin:
      top: null
      bottom: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

Properties

numbernumber

The number to count to.

prefixstring

Text to go before the number

suffixnumber

Text to go after the number

optionsobject

Configuration options for the counter

sizeenum

The font size of the text.

xs
s
m
l
xl
2xl
3xl
4xl
5xl
6xl

weightenum

The font weight.

normal Normal font weight
bold Bold font weight

caseenum

The text case.

normal Exactly as its input
upper Uppercase text
lower Lowercase text
capitalize Capitalized text

alignenum

The text alignment.

start Aligns text to the start
center Centers the text
end Aligns text to the end

decorationenum

Text decoration style.

none No decoration on text
glow Applies a glow effect to the text
italic Italicizes the text
underline Underlines the text
alt-color Uses an alternative color for the heading

durationnumber

Milliseconds to run count animation

starting_valuenumber

What number to start the count at

marginobject

The margin around the counter.

topenum

The top margin size.

none
xs
s
m
l
xl
2xl

bottomenum

The bottom margin size.

none
xs
s
m
l
xl
2xl