> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fetchski-attract.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Stats / By the numbers

> A band of big numbers that count up as visitors scroll.

The **Stats / By the numbers** section shows a row of big numbers, like "5,000+ happy customers" or "4.9 average rating". The numbers count up from zero as visitors scroll to them.

 **Who can do this:** anyone who can edit the page. The **CSS** tab is for Admins and Owners.

![A Stats band as visitors see it: eyebrow "By the numbers", heading, and four stats in one row, each with an icon, a big number, a label and a short description.](https://mintcdn.com/fetchski-attract-api/eWBaY8R4bYknXF5D/images/cms/guides/sections/stats/guides-sections-stats-overview-light.png?fit=max\&auto=format\&n=eWBaY8R4bYknXF5D\&q=85\&s=3ea417aa84ebd205cb29514040ef3db0)

Four stats in a row, each with an icon and a short description.

## When to use it

* To back up your claims with numbers: customers served, years in business, ratings.
* To break up a long page with a quick, scannable band.
* Beside text in a side-by-side layout, or inside a blog post, to make a point with figures.

## Add it to a page

**1. Open the page**

Sign in, open the page on your site, and choose **Edit** in the edit bar at the top.

**2. Find the spot**

Select the section next to where the new one should go. A round **+** button appears on its top and bottom edges. On an empty page, choose **Add Content** in the middle.

**3. Choose the section**

The **Add Content** menu opens with its groups. Choose the section, then select it and choose **Edit** in its side toolbar to make it yours.

For the full walkthrough, see [Add, move and remove sections](https://docs.fetchski-attract.com/guides/build-pages/add-move-remove-sections.md).

Choose **Add Content** → **Content** → **Stats / By the numbers**. A new Stats section starts with four sample stats, so replace them with your own numbers.

You can also add it inside a column of a **Layout** section, and in the body of a blog post.

![The Add Content menu open on the Content group, with the Stats / By the numbers tile ringed.](https://mintcdn.com/fetchski-attract-api/CiExJglj9hDwNWhX/images/cms/guides/sections/stats/guides-sections-stats-add-menu-light.png?fit=max\&auto=format\&n=CiExJglj9hDwNWhX\&q=85\&s=8139c424e4086a464fb20a310f731c85)

Stats / By the numbers lives in the Content group.

## What you can change

Select the section on the page and choose **Edit**. The editor opens beside the page, so you see each change as you make it. It has five tabs: **Stats**, **Background**, **Fonts**, **Button** and **CSS**.

Your changes go into the page's draft. Visitors see them once the page is published with **Update** in the edit bar (**Publish** on a page never published).

![The Stats editor open on the Stats tab beside the live band, scrolled to the Stats list with one stat open (Prefix, Value, Suffix, Label, Description ringed).](https://mintcdn.com/fetchski-attract-api/CiExJglj9hDwNWhX/images/cms/guides/sections/stats/guides-sections-stats-editor-light.png?fit=max\&auto=format\&n=CiExJglj9hDwNWhX\&q=85\&s=a609dfe0b9b97dfb025b88e5271b4f48)

Each stat has a value, an optional prefix and suffix, and a label.

> [accordion] Stats
>
> Everything about the band and the numbers in it.
>
> **Header**
>
> * **Show eyebrow** and **Eyebrow**: a small line above the heading, "By the numbers" to start. Choose its weight and size too.
> * **Heading**: an optional heading above the numbers. Leave it empty to hide the heading. To show just the numbers, also turn off **Show eyebrow**.
>
> **Layout**
>
> * **Stats per row**: **Auto (fit to width)** fits as many as look good, for any number of stats. You can also lock **2 per row**, **3 per row** or **4 per row**.
> * **Gap between stats**: **Tight**, **Normal** or **Roomy**.
> * **Overall stat size**: **Small**, **Medium** or **Large**. It scales the icon, number, label and description together.
> * **Alignment**: **Center** or **Left**, inside each stat.
> * **Vertical dividers between stats**: a thin line between stats. It looks best on a single row.
> * **Animate count-up on scroll**: numbers count up from zero when the band comes into view. Turn it off to show the final numbers straight away.
>
> **Sizes, weights and colors**
>
> * **Icon size** and **Icon spacing**: how big the icons are, and the space between each icon and its number.
> * **Value size**, **Label size** and **Description size**: fine-tune one part. **Auto (match stat size)** follows **Overall stat size**.
> * Each part also has a weight and a color. Each color can be set separately for the dark and light themes. Leave colors empty to use your site's colors: the numbers use your accent color.
>
> **Stats** (one row per number)
>
> * **Value**: the number itself, such as 500, 4.9 or 5,000. It's required.
> * **Prefix** and **Suffix**: symbols before or after the number, such as \$ or + or %. Keep them out of **Value**, so only the digits count up.
> * **Label**: what the number means, such as "Happy pups". It's required.
> * **Description**: optional small text under the label.
> * **Icon name**: an optional icon above the number, such as star or bolt. Find names at [fontawesome.com/icons](https://fontawesome.com/icons) and type them without "fa-". Once you add one, you can choose its family and color.
>
> Drag the stats in the list to change their order. To add, reorder or remove stats, see [Lists of items](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md#lists-of-items).

> [accordion] Background
>
> A background color for the whole band, set separately for the dark and light themes. It starts as **Transparent (page background)**. See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md).

> [accordion] Fonts
>
> Use a different typeface for parts of this section only, such as the numbers. Leave it empty to use the page's fonts, which normally come from **Site design** → **Typography**. See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md).

> [accordion] Button
>
> One optional button under the numbers, such as "See our story". It uses your site's outline button look, with an arrow after the label. It shows only when it has both a **Button label** and a **Button link**. To learn every button option, see [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md).

> [accordion] CSS
>
> Custom styles for this section only. Admins and Owners can change this tab. See [Custom CSS](https://docs.fetchski-attract.com/guides/site-design/custom-css.md).

## Looks you can make

![A single row of four stats with thin vertical dividers between them, no icons, left-aligned, on a Raised background band.](https://mintcdn.com/fetchski-attract-api/eWBaY8R4bYknXF5D/images/cms/guides/sections/stats/guides-sections-stats-rail-light.png?fit=max\&auto=format\&n=eWBaY8R4bYknXF5D\&q=85\&s=ef40934ea0a34ac5062dab074dbf8c8f)

Four numbers in a row, with lines between them.

**Four numbers in a row, separated by lines.** Turn on **Vertical dividers between stats**, set **Stats per row** to **4 per row**, and clear the icons.

![Three large stats with big icons and a "See our story" button under them, no eyebrow.](https://mintcdn.com/fetchski-attract-api/eWBaY8R4bYknXF5D/images/cms/guides/sections/stats/guides-sections-stats-large-three-light.png?fit=max\&auto=format\&n=eWBaY8R4bYknXF5D\&q=85\&s=8688d8e3064bed53dda32aad7acba0a3)

Three big numbers and a button to learn more.

**A bold statement.** Keep three stats, set **Overall stat size** to **Large** and **Icon size** to **XL**, and add a button on the **Button** tab.

![A Layout section with Rich Text on the left and a compact Stats section with two stats per row on the right.](https://mintcdn.com/fetchski-attract-api/eWBaY8R4bYknXF5D/images/cms/guides/sections/stats/guides-sections-stats-in-column-light.png?fit=max\&auto=format\&n=eWBaY8R4bYknXF5D\&q=85\&s=26374431afed85b88b25236eddd0d067)

A small grid of stats beside your story.

**Numbers beside your story.** Add Stats to a column of a **Layout** section. Set **Overall stat size** to **Small** and **Stats per row** to **2 per row**, and clear the heading.

## Good to know

* **Only plain numbers count up.** A value that is anything more than a number, such as "24/7" or "N/A", shows exactly as you typed it, without counting up.
* **Commas are added for you.** A whole number of 1,000 or more shows with commas, so 1200 shows as "1,200".
* **The count-up plays for visitors only.** While you edit, the band shows the final numbers. Visitors who prefer less motion, and sites with animations off, also see the final numbers.
* **Check the dividers on phones and tablets.** Preview the page at a phone or tablet size (see [Preview on phones and tablets](https://docs.fetchski-attract.com/guides/build-pages/preview-on-devices.md)). If the stats wrap onto a second row, the first stat of that row has a divider on its left. To fix it, choose a **Stats per row** that fits your stats on one row, or turn off **Vertical dividers between stats**.
* **The section heading** is a subheading on the page, so it never competes with your main heading.

## Appearance options

Most sections also share a few tabs that work the same everywhere:

* **Background**: set the color behind the section, separately for the dark and light themes.
* **Fonts**: use a different typeface for parts of this section only.
* **CSS**: add custom styles to this section. Admins and Owners can change it.

See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md) for every option.

## Related

> [card] [Feature Cards](https://docs.fetchski-attract.com/guides/sections/feature-cards.md)
>
> cards with an icon, a title and text.

> [card] [Side-by-side layouts](https://docs.fetchski-attract.com/guides/build-pages/side-by-side-layouts.md)
>
> put Stats beside other content.

> [card] [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md)
>
> every button option.

> [card] [Motion](https://docs.fetchski-attract.com/guides/site-design/motion.md)
>
> turn site animations on or off.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.