{
  "name": "stack-avatar-badge-overlay",
  "kind": "block",
  "primary": "div",
  "page": "/packages/web-components/components/stack/stack.examples.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "data-artifact-item": "",
    "data-artifact-label": "avatar with badge overlay"
  },
  "html": "<stack-ui style=\"width:fit-content\">\n        <avatar-ui text=\"KG\" size=\"md\"></avatar-ui>\n        <badge-ui text=\"3\" variant=\"danger\" style=\"position:absolute;top:-4px;right:-4px;\"></badge-ui>\n      </stack-ui>",
  "source": "packages/web-components/components/stack/stack.examples.html",
  "metadata": {
    "domain": "layout",
    "description": "Overlay stack — avatar with a status badge overlaid at a corner. Classic notification indicator pattern.",
    "keywords": [
      "stack",
      "overlay",
      "z-axis",
      "avatar",
      "badge",
      "status",
      "indicator",
      "notification",
      "overlay",
      "position"
    ]
  },
  "captured_at": "2026-06-10T20:25:14.783Z",
  "template": [
    {
      "id": "avatar",
      "component": "Avatar",
      "size": "md",
      "text": "KG"
    },
    {
      "id": "badge",
      "component": "Badge",
      "text": "3",
      "variant": "danger"
    },
    {
      "id": "root",
      "component": "Stack",
      "children": [
        "avatar",
        "badge"
      ]
    }
  ]
}