{
  "name": "utilities/kpi",
  "title": "KPI",
  "description": "Use the `ed-kpi` class to set a key figure and its label on one line, the way dashboard cards show them.",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/kpi/",
  "sections": [
    {
      "heading": "KPI",
      "markdown": "Use the `ed-kpi` class to set a key figure and its label on one line, the way dashboard cards show them.\n\nThe value carries the information, so `ed-kpi-value` sets it large and bold in `--ed-color-text`. The label stays in the body text it inherits and sits beside the value, centered on it. When the line gets too narrow, the label wraps below the value.\n\n```html\n<div class=\"ed-kpi\">\n  <span class=\"ed-kpi-value\">137</span>\n  <span>documents open</span>\n</div>\n```\n\nThe value does not have to be a number:\n\n```html\n<div class=\"ed-kpi\">\n  <span class=\"ed-kpi-value\">Alex Morgan</span>\n</div>\n<p class=\"ed-caption-s\">leads with 48 batches</p>\n```\n\nIn a card, put it into the default slot:\n\n```html\n<ed-card style=\"max-width: 16rem\">\n  <ed-icon slot=\"header-start\" name=\"inbox_in\"></ed-icon>\n  <h3 slot=\"header\">Incoming documents</h3>\n  <div class=\"ed-kpi\">\n    <span class=\"ed-kpi-value\">137</span>\n    <span>open</span>\n  </div>\n</ed-card>\n```"
    }
  ]
}