{
  "name": "leaderboard-table",
  "kind": "block",
  "primary": "section",
  "page": "/catalog/ui-patterns/v050-data-blocks/v050-data-blocks.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<section>\n    <card-ui>\n      <header>\n        <text-ui strong>Top contributors</text-ui>\n        <text-ui size=\"sm\" color=\"subtle\">This week</text-ui>\n      </header>\n      <section bleed>\n        <table-ui>\n          <thead>\n            <tr>\n              <th>Rank</th>\n              <th>Member</th>\n              <th>Score</th>\n              <th>Trend</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr>\n              <td><text-ui strong>1</text-ui></td>\n              <td><row-ui gap=\"2\" align=\"center\"><avatar-ui text=\"MR\" size=\"sm\"></avatar-ui><text-ui>Marco Rossi</text-ui></row-ui></td>\n              <td><text-ui>428 pts</text-ui></td>\n              <td><badge-ui text=\"+12\" variant=\"success\" size=\"sm\"></badge-ui></td>\n            </tr>\n            <tr>\n              <td><text-ui strong>2</text-ui></td>\n              <td><row-ui gap=\"2\" align=\"center\"><avatar-ui text=\"JC\" size=\"sm\"></avatar-ui><text-ui>June Chen</text-ui></row-ui></td>\n              <td><text-ui>412 pts</text-ui></td>\n              <td><badge-ui text=\"+8\" variant=\"success\" size=\"sm\"></badge-ui></td>\n            </tr>\n            <tr>\n              <td><text-ui strong>3</text-ui></td>\n              <td><row-ui gap=\"2\" align=\"center\"><avatar-ui text=\"DS\" size=\"sm\"></avatar-ui><text-ui>Diana Singh</text-ui></row-ui></td>\n              <td><text-ui>389 pts</text-ui></td>\n              <td><badge-ui text=\"-3\" variant=\"danger\" size=\"sm\"></badge-ui></td>\n            </tr>\n            <tr>\n              <td><text-ui strong>4</text-ui></td>\n              <td><row-ui gap=\"2\" align=\"center\"><avatar-ui text=\"AT\" size=\"sm\"></avatar-ui><text-ui>Aaron Tan</text-ui></row-ui></td>\n              <td><text-ui>351 pts</text-ui></td>\n              <td><badge-ui text=\"—\" variant=\"muted\" size=\"sm\"></badge-ui></td>\n            </tr>\n            <tr>\n              <td><text-ui strong>5</text-ui></td>\n              <td><row-ui gap=\"2\" align=\"center\"><avatar-ui text=\"BL\" size=\"sm\"></avatar-ui><text-ui>Bea Lopez</text-ui></row-ui></td>\n              <td><text-ui>328 pts</text-ui></td>\n              <td><badge-ui text=\"+5\" variant=\"success\" size=\"sm\"></badge-ui></td>\n            </tr>\n          </tbody>\n        </table-ui>\n      </section>\n    </card-ui>\n  </section>",
  "source": "catalog/ui-patterns/v050-data-blocks/v050-data-blocks.contents.html",
  "metadata": {
    "domain": "data",
    "description": "Ranked leaderboard table with rank + avatar + name + score + delta-badge per row.",
    "keywords": [
      "leaderboard",
      "ranking",
      "table",
      "top",
      "users",
      "contributors",
      "score",
      "delta",
      "rank",
      "competition",
      "winners"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "strong": true,
      "textContent": "Top contributors"
    },
    {
      "id": "text-2",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "This week"
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text",
        "text-2"
      ]
    },
    {
      "id": "text-3",
      "component": "Text",
      "textContent": "Rank",
      "variant": "body"
    },
    {
      "id": "text-4",
      "component": "Text",
      "textContent": "Member",
      "variant": "body"
    },
    {
      "id": "text-5",
      "component": "Text",
      "textContent": "Score",
      "variant": "body"
    },
    {
      "id": "text-6",
      "component": "Text",
      "textContent": "Trend",
      "variant": "body"
    },
    {
      "id": "column-2",
      "component": "Column",
      "children": [
        "text-3",
        "text-4",
        "text-5",
        "text-6"
      ]
    },
    {
      "id": "text-7",
      "component": "Text",
      "strong": true,
      "textContent": "1"
    },
    {
      "id": "avatar",
      "component": "Avatar",
      "size": "sm",
      "text": "MR"
    },
    {
      "id": "text-8",
      "component": "Text",
      "textContent": "Marco Rossi"
    },
    {
      "id": "row",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "avatar",
        "text-8"
      ]
    },
    {
      "id": "text-9",
      "component": "Text",
      "textContent": "428 pts"
    },
    {
      "id": "badge",
      "component": "Badge",
      "size": "sm",
      "text": "+12",
      "variant": "success"
    },
    {
      "id": "column-8",
      "component": "Column",
      "children": [
        "text-7",
        "row",
        "text-9",
        "badge"
      ]
    },
    {
      "id": "text-10",
      "component": "Text",
      "strong": true,
      "textContent": "2"
    },
    {
      "id": "avatar-2",
      "component": "Avatar",
      "size": "sm",
      "text": "JC"
    },
    {
      "id": "text-11",
      "component": "Text",
      "textContent": "June Chen"
    },
    {
      "id": "row-2",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "avatar-2",
        "text-11"
      ]
    },
    {
      "id": "text-12",
      "component": "Text",
      "textContent": "412 pts"
    },
    {
      "id": "badge-2",
      "component": "Badge",
      "size": "sm",
      "text": "+8",
      "variant": "success"
    },
    {
      "id": "column-13",
      "component": "Column",
      "children": [
        "text-10",
        "row-2",
        "text-12",
        "badge-2"
      ]
    },
    {
      "id": "text-13",
      "component": "Text",
      "strong": true,
      "textContent": "3"
    },
    {
      "id": "avatar-3",
      "component": "Avatar",
      "size": "sm",
      "text": "DS"
    },
    {
      "id": "text-14",
      "component": "Text",
      "textContent": "Diana Singh"
    },
    {
      "id": "row-3",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "avatar-3",
        "text-14"
      ]
    },
    {
      "id": "text-15",
      "component": "Text",
      "textContent": "389 pts"
    },
    {
      "id": "badge-3",
      "component": "Badge",
      "size": "sm",
      "text": "-3",
      "variant": "danger"
    },
    {
      "id": "column-18",
      "component": "Column",
      "children": [
        "text-13",
        "row-3",
        "text-15",
        "badge-3"
      ]
    },
    {
      "id": "text-16",
      "component": "Text",
      "strong": true,
      "textContent": "4"
    },
    {
      "id": "avatar-4",
      "component": "Avatar",
      "size": "sm",
      "text": "AT"
    },
    {
      "id": "text-17",
      "component": "Text",
      "textContent": "Aaron Tan"
    },
    {
      "id": "row-4",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "avatar-4",
        "text-17"
      ]
    },
    {
      "id": "text-18",
      "component": "Text",
      "textContent": "351 pts"
    },
    {
      "id": "badge-4",
      "component": "Badge",
      "size": "sm",
      "text": "—",
      "variant": "muted"
    },
    {
      "id": "column-23",
      "component": "Column",
      "children": [
        "text-16",
        "row-4",
        "text-18",
        "badge-4"
      ]
    },
    {
      "id": "text-19",
      "component": "Text",
      "strong": true,
      "textContent": "5"
    },
    {
      "id": "avatar-5",
      "component": "Avatar",
      "size": "sm",
      "text": "BL"
    },
    {
      "id": "text-20",
      "component": "Text",
      "textContent": "Bea Lopez"
    },
    {
      "id": "row-5",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "avatar-5",
        "text-20"
      ]
    },
    {
      "id": "text-21",
      "component": "Text",
      "textContent": "328 pts"
    },
    {
      "id": "badge-5",
      "component": "Badge",
      "size": "sm",
      "text": "+5",
      "variant": "success"
    },
    {
      "id": "column-28",
      "component": "Column",
      "children": [
        "text-19",
        "row-5",
        "text-21",
        "badge-5"
      ]
    },
    {
      "id": "column-7",
      "component": "Column",
      "children": [
        "column-8",
        "column-13",
        "column-18",
        "column-23",
        "column-28"
      ]
    },
    {
      "id": "table",
      "component": "Table",
      "children": [
        "column-2",
        "column-7"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "bleed": true,
      "children": [
        "column-33"
      ]
    },
    {
      "id": "column-33",
      "component": "Column",
      "children": [
        "table"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "header",
        "section"
      ]
    },
    {
      "id": "root",
      "component": "Section",
      "children": [
        "card"
      ]
    }
  ]
}