Module overview : Number Counter is a dynamic statistics module built to showcase achievements and key metrics in a visually engaging way.
It offers multiple layout styles, including structured counter cards and a timeline-based format for storytelling with numbers.
counter supports custom values, suffixes, titles, descriptions, and optional icons. You can control the animation speed, allowing numbers to count up at a pace that fits your design.
Advanced style controls allow full customization of counter colors, titles, descriptions, and operator symbols. Responsive structure ensures proper alignment and scaling across all devices.
Overlay layers improve readability when background images are used. Overlay layers improve readability when background images are used.
First Layout
Variation 1 – Background Highlight Counters : Layout One presents counters in a clean card-style structure over a large background section.
It supports a full-width background image to create a strong visual impact. An overlay color layer improves text readability over images.
Counters are displayed in a structured row layout for balanced spacing. Each card can include an icon, animated number, title, and description.
You can fully control colors for numbers, titles, and descriptions.
Second Layout
Variation 2 – Card-Based Statistic Grid : Layout Two focuses on a modern grid of statistic cards.
Each counter appears inside its own styled card container. Card backgrounds can be customized independently from the main section.
Icons, animated numbers, titles, and descriptions are all supported. Color controls allow full styling of text and counter values.
Spacing and layout adjust smoothly across all screen sizes.
Third Layout
Variation 3 – Timeline Counter Layout : Layout Three displays counters in a vertical timeline format.
Each stat connects through timeline dots and vertical lines. Counters support numbers, suffixes, and mathematical operators.
Timeline lines dynamically adjust height based on content.
Extensive styling options are included, giving you full control over
counter number colors, titles, descriptions, background layers, overlays, icons, timeline elements, and section spacing, ensuring perfect visual alignment with your brand design across desktop, tablet, and mobile screens.
