{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "width": "300px",
      "height": "50px",
      "border-bottom": "1px solid",
      "text-decoration": "none",
      "display": "flex",
      "flex-direction": "row",
      "font-size": "18px",
      "cursor": "default"
    },
    "attributes": {
      "class": "ms-bgColor-themeLighter--hover"
    },
    "customCardProps": {
      "openOnEvent": "hover",
      "directionalHint": "rightCenter",
      "isBeakVisible": true,
      "formatter": {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "row",
          "align-items": "flex-start",
          "flex-wrap": "wrap",
          "max-width": "=if(@window.innerWidth>750,floor((@window.innerWidth-550)/250)*250+'px','250px')"
        },
        "children": [
          {
            "elmType": "div",
            "forEach": "listItems in split([$Menu],'@@@')",
            "style": {
              "display": "=if([$listItems]=='','none','flex')",
              "flex-direction": "column",
              "width": "200px",
              "padding": "20px 25px"
            },
            "children": [
              {
                "elmType": "div",
                "forEach": "listItem in split([$listItems],'>')",
                "style": {
                  "margin-bottom": "8px",
                  "display": "=if([$listItem]=='','none','')"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "=[$listItem]",
                    "style": {
                      "display": "=if(indexOf([$listItem],'|')>-1,'none','')",
                      "font-weight": "bold",
                      "font-size": "18px",
                      "margin-bottom": "5px",
                      "white-space": "nowrap",
                      "overflow": "hidden"
                    }
                  },
                  {
                    "elmType": "a",
                    "txtContent": "=substring([$listItem],0,indexOf([$listItem],'|'))",
                    "style": {
                      "display": "=if(indexOf([$listItem],'|')>-1,'','none')",
                      "font-size": "14px",
                      "text-decoration": "none"
                    },
                    "attributes": {
                      "href": "=replaceAll(substring([$listItem],indexOf([$listItem],'|')+1,indexOf([$listItem]+'^','^')),'\n','')",
                      "target": "_blank",
                      "class": "ms-fontColor-neutralPrimaryAlt ms-fontColor-themePrimary--hover"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "20%",
          "text-align": "center"
        },
        "attributes": {
          "iconName": "[$Icon]"
        }
      },
      {
        "elmType": "div",
        "style": {
          "width": "60%"
        },
        "txtContent": "[$Title]"
      },
      {
        "elmType": "div",
        "style": {
          "width": "20%",
          "text-align": "center"
        },
        "attributes": {
          "iconName": "ChevronRightMed"
        }
      }
    ]
  }
}