{
  "id": "sprint-board-splits",
  "name": "Split Analysis",
  "theme": "sprint-board",
  "category": "Data & Reports",
  "description": "A split report where each kilometre is a filled block whose height is the pace, so a person can see where a race was won without reading a single time.",
  "layout": "A 96px summary numeral row above a ten-block split chart, with a fully ruled comparison table beneath and no shadows anywhere.",
  "modules": [
    {
      "key": "top",
      "name": "Summary numerals",
      "html": "\n<section class=\"sn\">\n  <div><span class=\"k\">Finish</span><b class=\"n\">31:04</b></div>\n  <div><span class=\"k\">Average pace</span><b class=\"n\">3:06</b></div>\n  <div><span class=\"k\">Fastest km</span><b class=\"n\">2:58</b></div>\n  <div><span class=\"k\">Slowest km</span><b class=\"n\">3:19</b></div>\n</section>"
    },
    {
      "key": "chart",
      "name": "Split blocks",
      "html": "\n<section class=\"sc\"><h2>Kilometre splits</h2>\n<div class=\"blocks\">\n  <div><i style=\"--h:78%\"></i><span class=\"n\">3:04</span><span class=\"km\">1</span></div>\n  <div><i style=\"--h:74%\"></i><span class=\"n\">3:02</span><span class=\"km\">2</span></div>\n  <div><i style=\"--h:82%\"></i><span class=\"n\">3:07</span><span class=\"km\">3</span></div>\n  <div><i style=\"--h:100%\"></i><span class=\"n\">3:19</span><span class=\"km\">4</span></div>\n  <div><i style=\"--h:86%\"></i><span class=\"n\">3:09</span><span class=\"km\">5</span></div>\n  <div><i style=\"--h:71%\"></i><span class=\"n\">3:01</span><span class=\"km\">6</span></div>\n  <div><i style=\"--h:64%\"></i><span class=\"n\">2:59</span><span class=\"km\">7</span></div>\n  <div><i class=\"best\" style=\"--h:60%\"></i><span class=\"n\">2:58</span><span class=\"km\">8</span></div>\n  <div><i style=\"--h:66%\"></i><span class=\"n\">3:00</span><span class=\"km\">9</span></div>\n  <div><i style=\"--h:69%\"></i><span class=\"n\">3:01</span><span class=\"km\">10</span></div>\n</div>\n<p class=\"cap\">The race was decided in kilometre 4, uphill, where the leader lost 17 seconds and everyone behind lost more.</p></section>"
    },
    {
      "key": "table",
      "name": "Comparison table",
      "html": "\n<section class=\"ct\"><h2>Against the field</h2>\n<table><thead><tr><th>Km</th><th>Split</th><th>Position</th><th>Gap to leader</th><th>Field median</th><th>Difference</th></tr></thead>\n<tbody>\n<tr><td class=\"n\">1</td><td class=\"n\">3:04</td><td class=\"n\">4</td><td class=\"n\">+0:06</td><td class=\"n\">3:22</td><td class=\"n g\">−0:18</td></tr>\n<tr><td class=\"n\">2</td><td class=\"n\">3:02</td><td class=\"n\">3</td><td class=\"n\">+0:04</td><td class=\"n\">3:26</td><td class=\"n g\">−0:24</td></tr>\n<tr><td class=\"n\">3</td><td class=\"n\">3:07</td><td class=\"n\">3</td><td class=\"n\">+0:05</td><td class=\"n\">3:31</td><td class=\"n g\">−0:24</td></tr>\n<tr class=\"hi\"><td class=\"n\">4</td><td class=\"n\">3:19</td><td class=\"n\">2</td><td class=\"n\">+0:01</td><td class=\"n\">3:48</td><td class=\"n g\">−0:29</td></tr>\n<tr><td class=\"n\">5</td><td class=\"n\">3:09</td><td class=\"n\">1</td><td class=\"n\">—</td><td class=\"n\">3:35</td><td class=\"n g\">−0:26</td></tr>\n<tr><td class=\"n\">6</td><td class=\"n\">3:01</td><td class=\"n\">1</td><td class=\"n\">—</td><td class=\"n\">3:29</td><td class=\"n g\">−0:28</td></tr>\n</tbody></table></section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "sprint-board-splits",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T00:00:34+09:00",
    "updatedAt": "2026-09-02T00:00:34+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/sprint-board-splits.json",
  "structure": "A 96px summary numeral row above a ten-block split chart, with a fully ruled comparison table beneath and no shadows anywhere.",
  "html": "<div class=\"dz dz-sprint-board-splits\" data-design=\"sprint-board-splits\" data-theme=\"sprint-board\">\n<section class=\"dz-mod\" data-mod=\"top\" aria-label=\"Summary numerals\">\n<section class=\"sn\">\n  <div><span class=\"k\">Finish</span><b class=\"n\">31:04</b></div>\n  <div><span class=\"k\">Average pace</span><b class=\"n\">3:06</b></div>\n  <div><span class=\"k\">Fastest km</span><b class=\"n\">2:58</b></div>\n  <div><span class=\"k\">Slowest km</span><b class=\"n\">3:19</b></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"chart\" aria-label=\"Split blocks\">\n<section class=\"sc\"><h2>Kilometre splits</h2>\n<div class=\"blocks\">\n  <div><i style=\"--h:78%\"></i><span class=\"n\">3:04</span><span class=\"km\">1</span></div>\n  <div><i style=\"--h:74%\"></i><span class=\"n\">3:02</span><span class=\"km\">2</span></div>\n  <div><i style=\"--h:82%\"></i><span class=\"n\">3:07</span><span class=\"km\">3</span></div>\n  <div><i style=\"--h:100%\"></i><span class=\"n\">3:19</span><span class=\"km\">4</span></div>\n  <div><i style=\"--h:86%\"></i><span class=\"n\">3:09</span><span class=\"km\">5</span></div>\n  <div><i style=\"--h:71%\"></i><span class=\"n\">3:01</span><span class=\"km\">6</span></div>\n  <div><i style=\"--h:64%\"></i><span class=\"n\">2:59</span><span class=\"km\">7</span></div>\n  <div><i class=\"best\" style=\"--h:60%\"></i><span class=\"n\">2:58</span><span class=\"km\">8</span></div>\n  <div><i style=\"--h:66%\"></i><span class=\"n\">3:00</span><span class=\"km\">9</span></div>\n  <div><i style=\"--h:69%\"></i><span class=\"n\">3:01</span><span class=\"km\">10</span></div>\n</div>\n<p class=\"cap\">The race was decided in kilometre 4, uphill, where the leader lost 17 seconds and everyone behind lost more.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"table\" aria-label=\"Comparison table\">\n<section class=\"ct\"><h2>Against the field</h2>\n<table><thead><tr><th>Km</th><th>Split</th><th>Position</th><th>Gap to leader</th><th>Field median</th><th>Difference</th></tr></thead>\n<tbody>\n<tr><td class=\"n\">1</td><td class=\"n\">3:04</td><td class=\"n\">4</td><td class=\"n\">+0:06</td><td class=\"n\">3:22</td><td class=\"n g\">−0:18</td></tr>\n<tr><td class=\"n\">2</td><td class=\"n\">3:02</td><td class=\"n\">3</td><td class=\"n\">+0:04</td><td class=\"n\">3:26</td><td class=\"n g\">−0:24</td></tr>\n<tr><td class=\"n\">3</td><td class=\"n\">3:07</td><td class=\"n\">3</td><td class=\"n\">+0:05</td><td class=\"n\">3:31</td><td class=\"n g\">−0:24</td></tr>\n<tr class=\"hi\"><td class=\"n\">4</td><td class=\"n\">3:19</td><td class=\"n\">2</td><td class=\"n\">+0:01</td><td class=\"n\">3:48</td><td class=\"n g\">−0:29</td></tr>\n<tr><td class=\"n\">5</td><td class=\"n\">3:09</td><td class=\"n\">1</td><td class=\"n\">—</td><td class=\"n\">3:35</td><td class=\"n g\">−0:26</td></tr>\n<tr><td class=\"n\">6</td><td class=\"n\">3:01</td><td class=\"n\">1</td><td class=\"n\">—</td><td class=\"n\">3:29</td><td class=\"n g\">−0:28</td></tr>\n</tbody></table></section></section>\n</div>",
  "css": "\n.dz-sprint-board-splits { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 24px 26px; }\n.dz-sprint-board-splits .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); display: block; }\n.dz-sprint-board-splits .n { font-family: var(--pv-mono); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }\n.dz-sprint-board-splits .sn { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 26px; }\n.dz-sprint-board-splits .sn div { background: var(--card); border-radius: var(--pv-radius-md); padding: 18px; }\n.dz-sprint-board-splits .sn b { display: block; font-size: 56px; font-weight: 700; margin-top: 6px; }\n.dz-sprint-board-splits h2 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 800; letter-spacing: -.02em; font-size: 22px; margin: 0 0 14px; }\n.dz-sprint-board-splits .sc { margin-bottom: 30px; }\n.dz-sprint-board-splits .blocks { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; align-items: end; }\n.dz-sprint-board-splits .blocks div { display: grid; gap: 6px; justify-items: center; }\n.dz-sprint-board-splits .blocks i { width: 100%; height: var(--h); min-height: 40px; background: var(--primary); display: block; border-radius: var(--pv-radius-sm); }\n.dz-sprint-board-splits .blocks .best { background: var(--foreground); }\n.dz-sprint-board-splits .blocks div { height: 200px; grid-template-rows: 1fr auto auto; }\n.dz-sprint-board-splits .blocks .n { font-size: 15px; font-weight: 700; }\n.dz-sprint-board-splits .km { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); }\n.dz-sprint-board-splits .cap { margin: 16px 0 0; font-size: 13.5px; line-height: 1.5; max-width: 58ch; }\n.dz-sprint-board-splits table { width: 100%; border-collapse: collapse; }\n.dz-sprint-board-splits th { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); text-align: right; padding: 0 12px 10px 0; border-bottom: 2px solid var(--border); }\n.dz-sprint-board-splits th:first-child { text-align: left; }\n.dz-sprint-board-splits td { padding: 11px 12px 11px 0; text-align: right; border-bottom: 1px solid var(--border); font-size: 15px; }\n.dz-sprint-board-splits td:first-child { text-align: left; }\n.dz-sprint-board-splits tr.hi td { background: var(--primary); color: var(--primary-foreground); }\n.dz-sprint-board-splits .g { color: var(--primary); font-weight: 700; }\n.dz-sprint-board-splits tr.hi .g { color: var(--primary-foreground); }\n",
  "requiredTheme": "/api/v1/themes/sprint-board.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;600;700&family=Epilogue:wght@400;500;600;700&family=Chivo+Mono:wght@400;500;600;700&display=swap"
}