Features Breakdown: Stats & Key Figures

This section is designed to display data, achievements, or impact metrics with engaging animations. It creates a grid of animated counters (KPIs) with extensive styling options for cards, numbers, and icons.

1. Animation & Data Formatting

• Smart Counting: Numbers animate from a "Start Value" to a "Target Value" when scrolled into view.

• Format Control:

  • Decimals: Adjustable decimal places (global or per-block override).

  • Compact Mode: Option to automatically abbreviate large numbers (e.g., convert 1500 to "1.5k" or 2000000 to "2M").

  • Separators: Toggle thousand separators (e.g., 15,000).

• Motion Settings: Customize animation duration (speed), easing curve (smoothness), and stagger delay (time between each card starting). Option to run animation only once or every time the section scrolls into view.

2. Card & Grid Design

• Responsive Grid: Independent control over the number of columns for Desktop (1-6) and Mobile (1-3).

• Card Styling:

  • Backgrounds: Supports solid colors or customizable Linear Gradients (2 colors + angle).

  • Borders & Radius: Adjustable border width, border color, and corner radius.

  • Shadows: Adjustable shadow opacity.

  • Hover Effect: Optional "Lift on hover" animation for interactivity.

• Icon Layout: Option to position icons Above the number or to the Left of the content.

3. Content & Blocks

• Structure: Each block consists of an Icon, a Number (with Prefix/Suffix), and a Label.

• Icons:

  • Library: 17 built-in vector icons (Star, Truck, Shield, Map, etc.).

  • Custom: Image picker to upload custom brand icons.

  • Styling: Global size and color control.

• Text Formatting: Support for Prefixes (e.g., "$") and Suffixes (e.g., "+", "%", " countries").

• Links: Make the entire card clickable with link URLs and "Open in new tab" options.

4. Typography & Colors

• Responsive Sizing: Independent pixel-perfect font size controls for Desktop and Mobile for:

  • Section Headings & Subheadings.

  • KPI Numbers.

  • KPI Labels.

• Color Control: Global section text color, with specific overrides available inside each block for the Number and Label to highlight specific metrics.

• Font Source: Use the Theme's typography or force a specific Custom Font.

5. Layout & Spacing

• Container Width: Three modes for both Desktop and Mobile:

  • Theme Page Width: Matches the rest of the site.

  • Container: Standard bootstrap-style width.

  • Custom: Set a specific maximum width (px) and padding.

• Alignment: Align content (Text and Grid) to Left, Center, or Right.

• Spacing: Adjustable vertical padding (top/bottom) and grid gaps.