{
  "element": "nve-avatar",
  "entrypoint": "@nvidia-elements/core/avatar/avatar.examples.json",
  "items": [
    {
      "id": "avatar",
      "name": "Default",
      "template": "<nve-avatar>AV</nve-avatar>\n",
      "summary": "Basic avatar component with text initials, providing a simple way to represent users when profile images are unavailable.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "avatar-image",
      "name": "Image",
      "template": "<nve-avatar>\n  <img src=\"static/images/test-image-1.svg\" alt=\"User Avatar\" />\n</nve-avatar>\n",
      "summary": "Avatar with profile image, offering personalized user representation and visual identity in interfaces.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "avatar-icon",
      "name": "Icon",
      "template": "<div nve-layout=\"row gap:sm align:wrap\">\n  <nve-avatar>\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-avatar>\n  <nve-avatar>\n    <nve-icon name=\"person\"></nve-icon>\n  </nve-avatar>\n</div>\n",
      "summary": "Avatar with icons for representing system users, bots, or special account types with clear visual indicators.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "avatar-size",
      "name": "Size",
      "template": "<div nve-layout=\"row gap:sm align:wrap\">\n  <nve-avatar size=\"sm\">AV</nve-avatar>\n  <nve-avatar>AV</nve-avatar>\n  <nve-avatar size=\"lg\">AV</nve-avatar>\n</div>\n",
      "summary": "Different avatar sizes to accommodate layout contexts from compact lists to prominent user profiles.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "avatar-group",
      "name": "Group",
      "template": "<nve-avatar-group>\n  <nve-avatar color=\"red-cardinal\">AV</nve-avatar>\n  <nve-avatar color=\"blue-cobalt\">AV</nve-avatar>\n  <nve-avatar color=\"green-grass\">AV</nve-avatar>\n  <nve-avatar>+3</nve-avatar>\n</nve-avatar-group>\n",
      "summary": "Avatar group component for displaying many users with overflow indicator, ideal for team displays and collaboration interfaces.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "avatar-color",
      "name": "Color",
      "template": "<div nve-layout=\"row gap:sm align:wrap\">\n  <nve-avatar color=\"red-cardinal\">AV</nve-avatar>\n  <nve-avatar color=\"gray-slate\">AV</nve-avatar>\n  <nve-avatar color=\"gray-denim\">AV</nve-avatar>\n  <nve-avatar color=\"blue-indigo\">AV</nve-avatar>\n  <nve-avatar color=\"blue-cobalt\">AV</nve-avatar>\n  <nve-avatar color=\"blue-sky\">AV</nve-avatar>\n  <nve-avatar color=\"teal-cyan\">AV</nve-avatar>\n  <nve-avatar color=\"green-mint\">AV</nve-avatar>\n  <nve-avatar color=\"teal-seafoam\">AV</nve-avatar>\n  <nve-avatar color=\"green-grass\">AV</nve-avatar>\n  <nve-avatar color=\"yellow-amber\">AV</nve-avatar>\n  <nve-avatar color=\"orange-pumpkin\">AV</nve-avatar>\n  <nve-avatar color=\"red-tomato\">AV</nve-avatar>\n  <nve-avatar color=\"pink-magenta\">AV</nve-avatar>\n  <nve-avatar color=\"purple-plum\">AV</nve-avatar>\n  <nve-avatar color=\"purple-violet\">AV</nve-avatar>\n  <nve-avatar color=\"purple-lavender\">AV</nve-avatar>\n  <nve-avatar color=\"pink-rose\">AV</nve-avatar>\n  <nve-avatar color=\"green-jade\">AV</nve-avatar>\n  <nve-avatar color=\"lime-pear\">AV</nve-avatar>\n  <nve-avatar color=\"yellow-nova\">AV</nve-avatar>\n  <nve-avatar color=\"brand-green\">AV</nve-avatar>\n</div>\n",
      "summary": "Comprehensive color palette for avatar backgrounds, enabling visual distinction and brand consistency across user representations.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}