uL uLanding Docs

Counter Section

The Counter block shows animated statistics — numbers that count up as the visitor scrolls (e.g. "500+ Projects", "98% Satisfaction").

Purpose

Numbers are persuasive and quick to scan. Use counters to highlight achievements: clients served, projects delivered, years in business, team size.

Available layouts

7 layouts:

Layout Best for
Centered Pill (default) Centered numbers in a pill container.
Bordered Columns Numbers in bordered columns.
Pill with Icons Pills that include icons.
Inter Columns Clean column layout.
Funnel Columns A funnel/marketing style.
Image Icons Numbers with image icons.
Archi Achievement An architectural style (supports dark mode + custom colors).

Field reference

Field What it does
Counter items (repeater) Each stat. For each item: number, suffix (e.g. "+", "%"), label (the caption).
Item icon type None / SVG / Icon class / Image.
Item icon class / SVG / image The icon, depending on type.
Padding top / bottom Spacing.
Theme Dark/light (Archi Achievement).
Archi title / subtitle / description / background color Extra fields for the Archi layout.

Best practices

  • Round, impressive numbers. "500+" reads better than "487".
  • 3–4 stats is the sweet spot — enough to impress, not overwhelm.
  • Pair a number with a clear label. "12" means nothing; "12 Years in Business" does.
  • Be honest. Inflated numbers damage trust if visitors sense them.

Example

Counter items:

  1. number 500, suffix +, label "Projects Completed"
  2. number 98, suffix %, label "Client Satisfaction"
  3. number 15, suffix +, label "Years Experience"
  4. number 50, suffix +, label "Team Members"

Frontend result

A row of statistics that animate from 0 up to each number when scrolled into view.

Counter Section on the live site

Screenshot: Page Builder → Counter Section (Bordered Columns) on the live site

Troubleshooting & common mistakes

Problem Fix
Numbers don't animate Set the Customizer animation level to Full; counters animate on scroll.
Suffix on wrong side Use the suffix field for trailing symbols (+, %, k).
Icons missing Set the icon type and provide the icon class/SVG/image.

Common mistakes: leaving labels blank, using too many stats, mismatched icon types.

➡️ Next: Awwwards Section