> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/group-blocks/decorative/counter.md).

# Counter

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FnXLJs7RUiKZNOG7JJJ1B%2Fimage.png?alt=media&amp;token=443355e7-6c41-480a-97d0-ee8b07c89274" alt=""><figcaption></figcaption></figure>

## General settings

### General

| Setting           | Description                                                                                                                                                                     |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Counter Style** | <p>Defines the visual look of the counter:</p><ul><li>Default (Minimalist display)</li><li>Circle (Default — displays the number within a circle/progress indicator).</li></ul> |
| **Space Between** | Sets the vertical space (gap) between the number and the title text, measured in pixels (px) (Range: 0px to 50px).                                                              |

### Counter

| Setting                | Description                                                                                                                                              |
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Starting number**    | The number from which the animation begins (Default is 0).                                                                                               |
| **Ending Number**      | The final value the counter will animate up to (Default is 100).                                                                                         |
| **Animation Duration** | Sets the duration of the counting animation in milliseconds (e.g., 2000 ms = 2 seconds).                                                                 |
| **Typography**         | Selects the size/style preset for the counting number. Options include: Paragraph or various Heading sizes (H1 to H6). *Edit presets in theme settings.* |
| **Stroke Color**       | Sets the color of the counter's animation stroke (e.g., the progress line in the circle style).                                                          |
| **Background Color**   | <p><em>Only visible when Counter Style is Circle</em>.</p><p>Sets the background color of the circle indicator.</p>                                      |
| **Indicator Color**    | <p><em>Only visible when Counter Style is Circle</em>.</p><p>Sets the color of the static indicator background within the circle.</p>                    |
| **Number Alignment**   | <p><em>Only visible when Layout is Default</em>.</p><p>Controls the horizontal alignment of the number: Left, Center (Default), or Right.</p>            |
| **Number Position**    | <p><em>Only visible when Layout is Default</em>.</p><p>Determines whether the number appears Before Title (Default) or After Title.</p>                  |

### Title

| Setting        | Description                                                                                                                                         |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Text**       | The title or label associated with the counter (e.g., "Performance," "Customers").                                                                  |
| **Typography** | Selects the size/style preset for the title text. Options include: Paragraph or various Heading sizes (H1 to H6). *Edit presets in theme settings.* |
| **Text Color** | Sets the color for the title text.                                                                                                                  |

## Spacing

These settings control the external spacing (padding) applied directly above and below this specific block.

| Setting    | Description                                                                                                      |
| ---------- | ---------------------------------------------------------------------------------------------------------------- |
| **Top**    | Sets the amount of empty space (padding) above this button block. Measured in pixels (px) (Range: 0px to 100px). |
| **Bottom** | Sets the amount of empty space (padding) below this button block. Measured in pixels (px) (Range: 0px to 100px). |