SR Stats 06
This module renders a heading and description above a row of three stat blocks, each showing a number with prefix and suffix text, a short caption, and an optional icon or image topper above the number.
Numbers can count up on scroll, and each stat can have its own column width instead of an even three-way split. Unlike sr-stats-03, each stat's icon or image includes a decorative-or-semantic accessibility toggle, so pick this one when you need that control over how screen readers announce the visuals.
Use cases
- Animated stat counters with icons
- Product metrics row with custom column widths
- Three stat blocks with accessible icon toppers
- Growth numbers section with mixed icon and photo stats
- Feature callouts with count-up numbers
Where it fits
- Included with: Free
- Page sections: Stats, Proof, Content
Editable fields
Content tab
| Field | Type | Notes |
|---|---|---|
| Background Video | File | Repeats: min 0, default 1. Add multiple file formats in order to provide compatibility with a broad range of browsers. |
| Background Video Tablet | File | Repeats: min 0, default 1. This background video will only be used on tablet devices. |
| Background Video Mobile | File | Repeats: min 0, default 1. This background video will only be used on mobile devices. |
| Enabled | Boolean | |
| ID | Text | Assign a ID to the module. |
| Class | Text | Assign a CLASS to the module. |
| Description | Rich text | |
| Lead Text | Boolean | Turn on to make the Description text larger. |
| Animate Stats | Boolean | |
| Animation Speed | Number | Time to animate in seconds. |
Heading Repeats: min 0, default 0.
| Field | Type | Notes |
|---|---|---|
| Heading | Text | |
| Size | Choice | HTML heading size. Options: H1, H2, H3, H4, H5, H6, P. |
| Display Size | Choice | Size that heading is displayed at. 12 options, including Auto, H1, H2. |
| Color | Choice | 15 options, including Auto, Primary, Secondary. |
| Color | Color | |
| Align | Choice | Options: Auto, Left, Center, Right. |
| CSS Class | Text |
Stats Repeats: min 1, default 3.
| Field | Type | Notes |
|---|---|---|
| Image Type | Choice | Options: None, Image, Icon. |
| Image | Image | |
| Icon | Icon | |
| Icon Size | Number | |
| Icon Color | Color | |
| Prefix | Text | |
| Suffix | Text | |
| Description | Text | |
| Lead Text | Boolean | Turn on to make the Description text larger. |
| Format Number | Boolean | Format the number with commas. |
| Custom Column Size | Boolean | |
| Purpose | Choice | The purpose of the icon, used for accessibility. If set to decorative, an additional attribute of aria-hidden="true" will be added to the icon. Options: Decorative, Semantic. |
Stats › Stat Repeats: min 1, max 1, default 1.
| Field | Type | Notes |
|---|---|---|
| Heading | Number | |
| Size | Choice | HTML heading size. Options: H1, H2, H3, H4, H5, H6, P. |
| Display Size | Choice | Size that heading is displayed at. 12 options, including Auto, H1, H2. |
| Color | Choice | 15 options, including Auto, Primary, Secondary. |
| Color | Color | |
| Align | Choice | Options: Auto, Left, Center, Right. |
| CSS Class | Text |
Stats › Column Size Repeats: min 1, max 4, default 1.
| Field | Type | Notes |
|---|---|---|
| Column Breakpoint | Choice | Options: None, Mobile, Tablet, Desktop, XL. |
| Column Width | Choice | 12 options, including 1, 2, 3. |
| Column Offset | Choice | 13 options, including 0, 1, 2. |
| Column Order | Number |
Style tab
Change log
| Version | Change |
|---|---|
| 2.0.0 | Stardust update |
| 1.2.1 | Column breakpoint fix |
| 1.2.0 | Accessibility improvements |
| 1.1.0 | Added responsive background options |
| 1.0.3 | Alignment fix |
| 1.0.2 | Added column sizes option |
SR Stats 05
This module renders a two-column split layout with a heading and description in the left column and up to two large stat blocks stacked in the right column, each with an optional image, prefix, number, suffix, and short description.
SR Style Guide
This module renders a full brand style guide page with a left-hand side navigation linking to sections for logo download, color swatches, typography samples, buttons, an embedded HubSpot form, and any number of custom sections you add.