> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/section-studio/sections/sections-overview/statistics.md).

# 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)