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

{% endcolumn %} {% column %} {% hint style="info" %} **Key features** Animated counter stats\ Multi-column layout\ Custom icons {% endhint %} {% hint style="info" %} **Blocks** Statistic {% endhint %} {% endcolumn %} {% endcolumns %}

Column layout

*** Set the the column width and space between columns. _{Click section to find settings}


Mobile layout	Stacked Carousel
Max column width	Full width Custom (250 - 750px)
Space between	Global Custom

Statistic blocks

*** 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.

Statistic

_{Click statistic block to find settings}


Statistic type	Number Text
Prefix	Add static text or symbols before the number.
Statistic number
Suffix	Add static text or symbols after the number.

Subheading and text

_{Click statistic block to find settings}


Subheading	Add text below the statistic
Text	Add text below the subheading

Icon

_{Click statistic block to find settings}


Icon
Use custom icon
Color scheme	Default Text Soft Color scheme 1 color scheme 2 Overlay Overlay soft
Color scheme	Override color scheme with custom Frame and Icon colors.

Statistics layout and style

*** 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.

Alignment

_{Click section to find settings}


Alignment	Left / Center / Right
Mobile alignment	Left / Center / Right

Font

_{Click section to find settings}


Statistic font	Heading Body
Statistic text size	20 - 100px
Mobile statistic text size	20 - 100px
Subheading font	Heading Body
Subheading size	1 - 6
Text size	1 - 6

Separator

_{Click section to find settings}


Statistic thousands separator	None Comma Space

Colors

Use the section colors for the statistic and heading, or set custom colors. _{Click section to find settings}


Text color	Use section Custom
Custom statistic
Custom heading

Statistics animation

*** By default, number statistics are animate to count up. You can adjust the style of the animation. _{Click section to find settings}


Enable counting animation
Duration	50 - 5000ms
Stagger direction	Start animating numbers from left to right, or right to left.
Speed	Control the jump between numbers when counting upwards. Higher speeds count up by smaller increments, making the animation appear more rapid for larger numbers.

Section styles

*** 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. _{Click section to find settings}

Content area

		Cover image
Full width	Section background and content span the screen's full width.	full-width.png
Full width padded	Section spans the screen's full width with some padding.	full-width-padded.png
Page width	Section background and content span the page width.	page-width.png

Setting	Options
Width	Full width Full width padded Page width
Full width on mobile	Available for Full width padded option.
Border	Top only Bottom only Both
Corner radius	Available for Full width padded and Page width options.
Dropshadow

Section

Setting	Options
Top padding	0 - 27
Bottom padding	0 - 27
Dividers	None Top only Bottom only Both
Force dividers full width
Color scheme	Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Anchor ID	Link directly to the section on any page. Learn more

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