{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "text-decoration": "none",
      "float": "left",
      "position": "relative"
    },
    "children": [
      {
        "elmType": "a",
        "attributes": {
          "href": "[$URL]",
          "target": "=if([$NewTab],'_blank','')",
          "class": "=if([$BackgroundColor]!='','ms-bgColor-shared'+[$Color]+'20 ms-bgColor-shared'+[$Color]+'10--hover','ms-bgColor-sharedGray10--hover')"
        },
        "style": {
          "text-decoration": "none",
          "border-radius": "5px",
          "display": "flex",
          "flex-wrap": "wrap",
          "width": "=if([$Width]=='','100px',[$Width]+'px')",
          "height": "=if([$Height]=='','40px',[$Height]+'px')",
          "margin-right": "10px",
          "margin-top": "10px",
          "box-shadow": "2px 2px 4px darkgrey",
          "align-items": "center"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "position": "absolute",
              "padding-top": "5px",
              "color": "=if([$FontColor]=='','white',[$FontColor])",
              "z-index": "1",
              "font-size": "14px",
              "margin-left": "30px",
              "align-items": "center",
              "width": "=if([$Width]=='',100-60+'px',[$Width]-60+'px')"
            },
            "txtContent": "[$Title]"
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "position": "absolute",
          "color": "white",
          "z-index": "1",
          "font-size": "18px",
          "right": "18px",
          "display": "=if([$Description]=='','none','block')",
          "cursor": "pointer"
        },
        "txtContent": "...",
        "customCardProps": {
          "formatter": {
            "elmType": "div",
            "txtContent": "[$Description]",
            "style": {
              "font-size": "14px",
              "padding": "10px",
              "width": "160px",
              "color": "black",
              "background-color": "white"
            }
          },
          "openOnEvent": "click",
          "directionalHint": "rightCenter",
          "isBeakVisible": true,
          "beakStyle": {
            "backgroundColor": "white"
          }
        }
      },
      {
        "elmType": "div",
        "style": {
          "position": "absolute",
          "padding-top": "15px",
          "color": "=if([$FontColor]=='','white',[$FontColor])",
          "z-index": "1",
          "font-size": "18px",
          "padding-left": "5px",
          "cursor": "pointer",
          "align-items": "center"
        },
        "attributes": {
          "iconName": "[$Icon]"
        }
      }
    ]
  }
}