# Statistics

{% columns %}
{% column width="58.333333333333336%" %}
Use the **Statistics** section to display animated stats for your store or products.

<div data-with-frame="true"><figure><img src="/files/6K5hFHk0FKeqXKHKyeHb" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}

{% column %}
{% hint style="info" %}
**Key features**

Animated counter stats\
Multi-column layout\
Custom icons
{% endhint %}

{% hint style="info" %}
**Blocks**

Statistic
{% endhint %}

{% endcolumn %}
{% endcolumns %}

<h2 align="center">Column layout</h2>

***

Set the the column width and space between columns.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Mobile layout</mark></td><td valign="top"><mark style="color:$info;">Stacked</mark><br><mark style="color:$info;">Carousel</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Max column width</mark></td><td valign="top"><mark style="color:$info;">Full width</mark><br><mark style="color:$info;">Custom (250 - 750px)</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Space between</mark></td><td valign="top"><mark style="color:$info;">Global</mark><br><mark style="color:$info;">Custom</mark></td></tr></tbody></table>

<h2 align="center">Statistic blocks</h2>

***

Add blocks with statistics (numbers or text), subheading and paragraph text. You can change the statistic prefix (e.g. "$") or add a suffix (e.g. "%"). You can also display icons above the statistics.

Click **(+) Add block** to add columns of statistics. Use the drag handles **`⋮⋮`** to re-order blocks.

<details>

<summary>Statistic</summary>

<sub><mark style="color:$info;">Click statistic block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Statistic type</mark></td><td valign="top"><mark style="color:$info;">Number</mark><br><mark style="color:$info;">Text</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Prefix</mark></td><td valign="top"><mark style="color:$info;">Add static text or symbols before the number.</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Statistic number</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Suffix</mark></td><td valign="top"><mark style="color:$info;">Add static text or symbols after the number.</mark></td></tr></tbody></table>

</details>

<details>

<summary>Subheading and text</summary>

<sub><mark style="color:$info;">Click statistic block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Subheading</mark></td><td valign="top">Add text below the statistic</td></tr><tr><td valign="top"><mark style="color:blue;">Text</mark></td><td valign="top">Add text below the subheading</td></tr></tbody></table>

</details>

<details>

<summary>Icon</summary>

<sub><mark style="color:$info;">Click statistic block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="240.46142578125" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Icon</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Use custom icon</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Color scheme</mark></td><td valign="top"><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Text</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">color scheme 2</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Overlay soft</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Color scheme</mark></td><td valign="top">Override color scheme with custom Frame and Icon colors.</td></tr></tbody></table>

</details>

<h2 align="center">Statistics layout and style</h2>

***

You can customize the position and alignment of the content in the section settings.

Click **(+) Add block** to add headings, text, and buttons. Use the drag handles **`⋮⋮`** to re-order blocks.

<details>

<summary>Alignment</summary>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Alignment</mark></td><td valign="top"><mark style="color:$info;">Left / Center / Right</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile alignment</mark></td><td valign="top"><mark style="color:$info;">Left / Center / Right</mark></td></tr></tbody></table>

</details>

<details>

<summary>Font</summary>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Statistic font</mark></td><td valign="top"><mark style="color:$info;">Heading</mark><br><mark style="color:$info;">Body</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Statistic text size</mark></td><td valign="top"><mark style="color:$info;">20 - 100px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile statistic text size</mark></td><td valign="top"><mark style="color:$info;">20 - 100px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Subheading font</mark></td><td valign="top"><mark style="color:$info;">Heading</mark><br><mark style="color:$info;">Body</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Subheading size</mark></td><td valign="top"><mark style="color:$info;">1 - 6</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Text size</mark></td><td valign="top"><mark style="color:$info;">1 - 6</mark></td></tr></tbody></table>

</details>

<details>

<summary>Separator</summary>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Statistic thousands separator</mark></td><td valign="top"><mark style="color:$info;">None</mark><br><mark style="color:$info;">Comma</mark><br><mark style="color:$info;">Space</mark></td></tr></tbody></table>

</details>

<details>

<summary>Colors</summary>

Use the section colors for the statistic and heading, or set custom colors.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.54400634765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Text color</mark></td><td valign="top"><mark style="color:$info;">Use section</mark><br><mark style="color:$info;">Custom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Custom statistic</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Custom heading</mark></td><td valign="top"></td></tr></tbody></table>

</details>

<h2 align="center">Statistics animation</h2>

***

By default, number statistics are animate to count up. You can adjust the style of the animation.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Enable counting animation</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Duration</mark></td><td valign="top"><mark style="color:$info;">50 - 5000ms</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Stagger direction</mark></td><td valign="top">Start animating numbers from left to right, or right to left.</td></tr><tr><td valign="top"><mark style="color:blue;">Speed</mark></td><td valign="top">Control the jump between numbers when counting upwards. Higher speeds count up by smaller increments, making the animation appear more rapid for larger numbers.</td></tr></tbody></table>

<h2 align="center">Section styles</h2>

***

Customize general style options for the section and content area. Settings for **Content area** allow you to adjust the width, borders, and dropshadow of the container of the section content.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<details>

<summary>Content area</summary>

<table data-view="cards"><thead><tr><th align="center"></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td align="center"><strong>Full width</strong></td><td>Section background and content span the screen's full width.</td><td data-object-fit="contain"><a href="/files/KN0tRx1sNflpkl3O0DQO">/files/KN0tRx1sNflpkl3O0DQO</a></td></tr><tr><td align="center"><strong>Full width padded</strong></td><td>Section spans the screen's full width with some padding.</td><td data-object-fit="contain"><a href="/files/k8ye35eg8K9kPTyHbL79">/files/k8ye35eg8K9kPTyHbL79</a></td></tr><tr><td align="center"><strong>Page width</strong></td><td>Section background and content span the page width.</td><td data-object-fit="contain"><a href="/files/KXOwANhnH80jQD0D7bUN">/files/KXOwANhnH80jQD0D7bUN</a></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th width="240.36785888671875">Setting</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Width</mark></td><td><mark style="color:$info;">Full width</mark><br><mark style="color:$info;">Full width padded</mark><br><mark style="color:$info;">Page width</mark></td></tr><tr><td><mark style="color:blue;">Full width on mobile</mark></td><td><mark style="color:$info;">Available for <strong>Full width padded</strong> option.</mark></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-1"><mark style="color:blue;">Border</mark></a></td><td><mark style="color:$info;">Top only</mark><br><mark style="color:$info;">Bottom only</mark><br><mark style="color:$info;">Both</mark></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-1"><mark style="color:blue;">Corner radius</mark></a></td><td><mark style="color:$info;">Available for <strong>Full width padded</strong> and <strong>Page width</strong> options.</mark></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-1"><mark style="color:blue;">Dropshadow</mark></a></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr></tbody></table>

</details>

<details>

<summary>Section</summary>

<div><figure><img src="/files/GKReBH3EfMLtTnOAek62" alt="" width="338"><figcaption></figcaption></figure> <figure><img src="/files/y88BaLClRCPljbxnyu4N" alt="" width="375"><figcaption></figcaption></figure></div>

<table data-header-hidden><thead><tr><th width="240.36785888671875">Setting</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Top padding</mark></td><td><mark style="color:$info;">0 - 27</mark></td></tr><tr><td><mark style="color:blue;">Bottom padding</mark></td><td><mark style="color:$info;">0 - 27</mark></td></tr><tr><td><mark style="color:blue;">Dividers</mark></td><td><mark style="color:$info;">None</mark><br><mark style="color:$info;">Top only</mark><br><mark style="color:$info;">Bottom only</mark><br><mark style="color:$info;">Both</mark></td></tr><tr><td><mark style="color:blue;">Force dividers full width</mark></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Inverse</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Accent</mark><br><mark style="color:$info;">Accent inverse</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark></td></tr><tr><td><mark style="color:blue;">Anchor ID</mark></td><td>Link directly to the section on any page. <a href="/pages/XSI0ASdBWe3CkRGeWchj">Learn more</a></td></tr></tbody></table>

</details>

[^1]: Modify in [Global styles > Borders and styles > Large elements](/section-studio/sections/global-styles/borders-and-styles.md#large-elements)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/section-studio/sections/sections-overview/statistics.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.