{
  "name": "ListScreenKpiStrip",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/ListScreenKpiStrip.tsx",
  "chapterTag": "16 Pipeline & CRM",
  "chapter": "16-app-pipeline.html",
  "sectionId": "contacts-list",
  "elName": "Contacts list &mdash; <em style=\"font-family:var(--f-serif); font-weight:400;\">114 contacts &middot; 7 days new-contacts KPI</em>",
  "demoUrl": "https://brand.magicblocks.ai/components/16-app-pipeline#contacts-list",
  "hasLiveDemo": false,
  "description": "4-up grid container sitting between `<ListScreenHead>` and\n`<ListScreenTabs>`. Composes the kit's `<KpiDeltaTile>` (chapter 7.27)\nor any other tile-shaped content for at-a-glance workspace metrics.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "ListScreenKpiStrip",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "ListScreenKpiStripProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { ListScreenKpiStrip } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "KPI tiles. Typically `<KpiDeltaTile>` (chapter 7.27) instances, but any 4-up grid content works (`<Card>`s, custom tiles, etc.)."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": ""
    }
  ],
  "classesUsed": [
    "list-screen-kpi-strip"
  ],
  "examples": {
    "react": "<ListScreenKpiStrip>\n  <KpiDeltaTile label=\"Conversations\" value=\"1,038\" delta={{ value: \"+12%\", tone: \"good\" }} />\n  <KpiDeltaTile label=\"Qualified Leads\" value=\"370\" delta={{ value: \"+9%\", tone: \"good\" }} />\n  <KpiDeltaTile label=\"Meetings Booked\" value=\"51\" delta={{ value: \"+24%\", tone: \"good\" }} />\n  <KpiDeltaTile label=\"Avg Reply Time\" value=\"52s\" delta={{ value: \"p50\", tone: \"neutral\" }} />\n</ListScreenKpiStrip>",
    "html": "<div class=\"list-screen-frame\"><div class=\"list-screen ct-list\" role=\"region\" aria-label=\"Contacts\">\n\n  <header class=\"list-screen-head\">\n    <div class=\"list-screen-head-title\">\n      <h2>Contacts</h2>\n      <p>Capture and convert users who interact with your AI. <em>Manage contacts in one place.</em><a href=\"#\">More on Contacts &rarr;</a></p>\n    </div>\n    <div class=\"list-screen-head-actions\">\n      <div class=\"ct-head-stack\">\n        <div class=\"ct-kpi-card\">\n          <div class=\"ct-kpi-head\">\n            <span>New Contacts</span>\n            <span class=\"ct-kpi-range\">Last 7 days <svg width=\"9\" height=\"9\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m3 4.5 3 3 3-3\"/></svg></span>\n          </div>\n          <div class=\"ct-kpi-value\">23 <span class=\"ct-kpi-delta\">&uarr; 18%</span></div>\n          <div class=\"ct-kpi-meta\">10 May &ndash; 17 May 2026 &middot; vs prior week</div>\n        </div>\n        <button type=\"button\" class=\"ct-add-contact\">\n          <svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><path d=\"M7 2.5v9M2.5 7h9\"/></svg>\n          Add Contact\n        </button>\n      </div>\n    </div>\n  </header>\n\n  <div class=\"list-screen-tabs\" role=\"tablist\">\n    <button type=\"button\" class=\"is-active\" role=\"tab\" aria-selected=\"true\">Contacts <span class=\"list-screen-tab-count\">114</span></button>\n    <button type=\"button\" role=\"tab\">Segments <span class=\"list-screen-tab-count\">3</span></button>\n  </div>\n\n  <div class=\"list-screen-toolbar\">\n    <label class=\"ct-search\">\n      <svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><circle cx=\"6\" cy=\"6\" r=\"3.5\"/><line x1=\"8.5\" y1=\"8.5\" x2=\"12\" y2=\"12\"/></svg>\n      <input type=\"search\" placeholder=\"Search by user name, email&hellip;\" />\n    </label>\n    <span class=\"ct-sync\">Synced right now</span>\n    <button type=\"button\" class=\"ct-pill\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 7a5 5 0 1 1-1.5-3.5\"/><path d=\"M12 2v3h-3\"/></svg>Refresh</button>\n    <button type=\"button\" class=\"ct-pill\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 1v8m0 0-3-3m3 3 3-3M2 11h10\"/></svg>Export</button>\n    <button type=\"button\" class=\"ct-pill\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1 3h12L9 8v4l-4-2V8z\"/></svg>Filters</button>\n    <button type=\"button\" class=\"ct-pill\" disabled>Add to segment</button>\n  </div>\n\n  <div class=\"tbl-wrap is-flush\">\n    <table class=\"tbl\">\n      <thead>\n        <tr>\n          <th class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select all\" /></th>\n          <th class=\"tbl-sort is-active\">Users <span class=\"tbl-tab-count\" style=\"margin-left:6px; font:500 11px/1 var(--f-mono); color:var(--fg-faint); background:var(--bg-warm); padding:2px 7px; border-radius:var(--r-pill);\">114</span><span class=\"tbl-sort-ic\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 15 6-6 6 6\"/></svg></span></th>\n          <th class=\"tbl-sort\">Sessions <span class=\"tbl-sort-ic\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></span></th>\n          <th>Conversion</th>\n          <th class=\"tbl-sort\">Last seen <span class=\"tbl-sort-ic\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></span></th>\n          <th>Segments</th>\n          <th class=\"tbl-right\"></th>\n        </tr>\n      </thead>\n      <tbody>\n\n        <tr>\n          <td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <div class=\"tbl-person\">\n              <span class=\"av\" style=\"background:rgba(15,128,98,0.14); color:#0F8062;\">NM</span>\n              <div>\n                <div class=\"tbl-name\">Nectar Mint</div>\n                <div class=\"tbl-sub\">\n                  <span class=\"ct-contact-meta\">nectar.mint@example.co</span>\n                  <button class=\"ct-copy\" type=\"button\" aria-label=\"Copy email\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/><path d=\"M5 3V2h6v6h-1\"/></svg></button>\n                  <span style=\"margin: 0 6px; color:var(--fg-faint);\">&middot;</span>\n                  <span class=\"ct-contact-meta\">+44 7700 900 142</span>\n                  <button class=\"ct-copy\" type=\"button\" aria-label=\"Copy phone\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/><path d=\"M5 3V2h6v6h-1\"/></svg></button>\n                </div>\n              </div>\n            </div>\n          </td>\n          <td><span class=\"ct-sessions-cell\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg>12</span></td>\n          <td><span class=\"badge\"><span class=\"dot dot-green\"></span> Meeting booked</span></td>\n          <td><span class=\"mono tbl-mono\">2m ago</span></td>\n          <td><span class=\"ct-segments\"><span class=\"badge\"><span class=\"dot dot-pink\"></span> Warm Leads</span></span></td>\n          <td class=\"tbl-right\"><button class=\"tbl-icon\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td>\n        </tr>\n\n        <tr>\n          <td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <div class=\"tbl-person\">\n              <span class=\"av\" style=\"background:rgba(45,111,227,0.14); color:#2456B0;\">BC</span>\n              <div>\n                <div class=\"tbl-name\">Bessie Cooper</div>\n                <div class=\"tbl-sub\">\n                  <span class=\"ct-contact-meta\">bessie@trailhaus.io</span>\n                  <button class=\"ct-copy\" type=\"button\" aria-label=\"Copy email\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/><path d=\"M5 3V2h6v6h-1\"/></svg></button>\n                </div>\n              </div>\n            </div>\n          </td>\n          <td><span class=\"ct-sessions-cell\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg>8</span></td>\n          <td><span class=\"badge\"><span class=\"dot dot-green\"></span> Qualified</span></td>\n          <td><span class=\"mono tbl-mono\">3d ago</span></td>\n          <td><span class=\"ct-segments\"><span class=\"badge\"><span class=\"dot dot-blue\"></span> Returning</span></span></td>\n          <td class=\"tbl-right\"><button class=\"tbl-icon\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td>\n        </tr>\n\n        <tr>\n          <td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <div class=\"tbl-person\">\n              <span class=\"av\" style=\"background:#FEF3C7; color:#92400E;\">LA</span>\n              <div>\n                <div class=\"tbl-name\">Leslie Alexander</div>\n                <div class=\"tbl-sub\">\n                  <span class=\"ct-contact-meta\">leslie.a@brookfield.com</span>\n                  <button class=\"ct-copy\" type=\"button\" aria-label=\"Copy email\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/><path d=\"M5 3V2h6v6h-1\"/></svg></button>\n                </div>\n              </div>\n            </div>\n          </td>\n          <td><span class=\"ct-sessions-cell\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg>17</span></td>\n          <td><span class=\"badge\"><span class=\"dot dot-green\"></span> Demo booked</span></td>\n          <td><span class=\"mono tbl-mono\">5h ago</span></td>\n          <td><span class=\"ct-segments\"><span class=\"badge\"><span class=\"dot dot-pink\"></span> Warm Leads</span><span class=\"badge\"><span class=\"dot dot-blue\"></span> Returning</span></span></td>\n          <td class=\"tbl-right\"><button class=\"tbl-icon\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td>\n        </tr>\n\n        <tr>\n          <td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <div class=\"tbl-person\">\n              <span class=\"av\" style=\"background:rgba(193,52,73,0.14); color:#C13449;\">RR</span>\n              <div>\n                <div class=\"tbl-name\">Ronald Richards</div>\n                <div class=\"tbl-sub\">\n                  <span class=\"ct-contact-meta\">ronald@kindred.co</span>\n                  <button class=\"ct-copy\" type=\"button\" aria-label=\"Copy email\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/><path d=\"M5 3V2h6v6h-1\"/></svg></button>\n                </div>\n              </div>\n            </div>\n          </td>\n          <td><span class=\"ct-sessions-cell\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg>14</span></td>\n          <td><span class=\"badge\"><span class=\"dot dot-grey\"></span> Not converted</span></td>\n          <td><span class=\"mono tbl-mono\">3d ago</span></td>\n          <td><span class=\"ct-segments-none\">&mdash;</span></td>\n          <td class=\"tbl-right\"><button class=\"tbl-icon\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td>\n        </tr>\n\n        <tr>\n          <td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <div class=\"tbl-person\">\n              <span class=\"av\" style=\"background:rgba(123,63,184,0.14); color:#7B3FB8;\">JW</span>\n              <div>\n                <div class=\"tbl-name\">Jenny Wilson</div>\n                <div class=\"tbl-sub\">\n                  <span class=\"ct-contact-meta\">jenny.w@northpeak.co</span>\n                  <button class=\"ct-copy\" type=\"button\" aria-label=\"Copy email\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/><path d=\"M5 3V2h6v6h-1\"/></svg></button>\n                </div>\n              </div>\n            </div>\n          </td>\n          <td><span class=\"ct-sessions-cell\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg>6</span></td>\n          <td><span class=\"badge\"><span class=\"dot dot-blue\"></span> Pricing intent</span></td>\n          <td><span class=\"mono tbl-mono\">35m ago</span></td>\n          <td><span class=\"ct-segments\"><span class=\"badge\"><span class=\"dot dot-pink\"></span> Warm Leads</span></span></td>\n          <td class=\"tbl-right\"><button class=\"tbl-icon\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td>\n        </tr>\n\n        <tr>\n          <td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <div class=\"tbl-person\">\n              <span class=\"av\" style=\"background:var(--warm-2); color:var(--fg-soft);\" aria-label=\"Anonymous\">A</span>\n              <div>\n                <div class=\"ct-anon\">Anonymous A2891A</div>\n                <div class=\"ct-anon-sub\">first seen via web chat</div>\n              </div>\n            </div>\n          </td>\n          <td><span class=\"ct-sessions-cell\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg>1</span></td>\n          <td><span class=\"badge\"><span class=\"dot dot-grey\"></span> Not converted</span></td>\n          <td><span class=\"mono tbl-mono\">2h ago</span></td>\n          <td><span class=\"ct-segments-none\">&mdash;</span></td>\n          <td class=\"tbl-right\"><button class=\"tbl-icon\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td>\n        </tr>\n\n        <tr>\n          <td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <div class=\"tbl-person\">\n              <span class=\"av\" style=\"background:#DCFCE7; color:#166534;\">JJ</span>\n              <div>\n                <div class=\"tbl-name\">Jacob Jones</div>\n                <div class=\"tbl-sub\">\n                  <span class=\"ct-contact-meta\">jacob.jones@ridgepine.co</span>\n                  <button class=\"ct-copy\" type=\"button\" aria-label=\"Copy email\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/><path d=\"M5 3V2h6v6h-1\"/></svg></button>\n                </div>\n              </div>\n            </div>\n          </td>\n          <td><span class=\"ct-sessions-cell\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg>9</span></td>\n          <td><span class=\"badge\"><span class=\"dot dot-green\"></span> Quote sent</span></td>\n          <td><span class=\"mono tbl-mono\">1d ago</span></td>\n          <td><span class=\"ct-segments\"><span class=\"badge\"><span class=\"dot dot-blue\"></span> Returning</span></span></td>\n          <td class=\"tbl-right\"><button class=\"tbl-icon\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td>\n        </tr>\n\n        <tr>\n          <td class=\"tbl-check\"><input type=\"checkbox\" aria-label=\"Select row\" /></td>\n          <td>\n            <div class=\"tbl-person\">\n              <span class=\"av\" style=\"background:var(--warm-2); color:var(--fg-soft);\" aria-label=\"Anonymous\">A</span>\n              <div>\n                <div class=\"ct-anon\">Anonymous 5F541F</div>\n                <div class=\"ct-anon-sub\">first seen via SMS</div>\n              </div>\n            </div>\n          </td>\n          <td><span class=\"ct-sessions-cell\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/></svg>1</span></td>\n          <td><span class=\"badge\"><span class=\"dot dot-grey\"></span> Not converted</span></td>\n          <td><span class=\"mono tbl-mono\">18d ago</span></td>\n          <td><span class=\"ct-segments-none\">&mdash;</span></td>\n          <td class=\"tbl-right\"><button class=\"tbl-icon\" aria-label=\"Row actions\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"12\" cy=\"5\" r=\"1\"/><circle cx=\"12\" cy=\"19\" r=\"1\"/></svg></button></td>\n        </tr>\n\n      </tbody>\n    </table>\n  </div>\n\n  <footer class=\"list-screen-foot\">\n    <span>1&ndash;8 of 114</span>\n    <div class=\"ct-list-foot-pages\">\n      <button type=\"button\" disabled>&lsaquo;</button>\n      <button type=\"button\" class=\"is-active\">1</button>\n      <button type=\"button\">2</button>\n      <button type=\"button\">3</button>\n      <button type=\"button\">&hellip;</button>\n      <button type=\"button\">15</button>\n      <button type=\"button\">&rsaquo;</button>\n    </div>\n  </footer>\n\n</div></div>",
    "css": ".list-screen-kpi-strip {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: var(--s-3);\n  padding: 0 var(--s-6) var(--s-4);\n}"
  }
}