Skip to main content

​
Metrics

The Metrics component is perfect for displaying KPIs or highlights inside your PDF templates. With it, you can quickly show numbers, icons, and subtitles, ideal for reports, dashboards, or performance summaries.

​
How It Works

Each metric card contains:
  • Icon – choose from our icon library and customize the color.
  • Name – label that describes the metric.
  • Value – dynamically filled using variables.
  • Subtitle – optional, can include HTML for styled notes (e.g., growth indicators).
You can add multiple metrics within the same component. By default, they display side by side.

​
Sending Data Dynamically

Metrics are automatically bound to variables based on the component identifier and metric name. For example, with identifier “Metrics title” and two metrics (Metrics 01 and Metrics 02), the payload looks like this: 
{
  "metrics_title": {
    "metrics_01": {
      "value": "your metrics_title.metrics_01.value here",
      "subtitle": "your metrics_title.metrics_01.subtitle here"
    },
    "metrics_02": {
      "value": "your metrics_title.metrics_02.value here",
      "subtitle": "your metrics_title.metrics_02.subtitle here"
    }
  }
}

​
Subtitle with HTML

You can pass HTML tags on the subtitle to customize formatting, such as: 
"subtitle": "<p style='color: green;'>+12% vs last month</p>"
This is especially useful for trend indicators or colored annotations.

​
Design & Layout Options

  • Show title: Toggle to display or hide the component title.
  • Margin convention: Control horizontal padding - none (0px) , small (12px), medium (20px) or large (40px)
  • Justify options: Align metrics left, center, right, or spaced evenly.
  • Visibility convention: If no data is sent for a metric, it won’t render.

​
Best Practices

  • ✅ Use up to 4 metrics per row – this ensures an optimized layout for readability.
  • 🔄 More than 4 metrics – the component will wrap automatically.
  • 📏 Want all metrics on one line? Increase the page width via the Style button.
💡Tip: Combine icons with styled subtitles for extra clarity, e.g., show an arrow icon and a green “+12%” subtitle to highlight growth.