{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 230,
  "width": 320,
  "hideSelection": true,
  "disableSelection": true,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "style": {
          "padding": "16px",
          "box-sizing": "border-box",
          "display": "flex",
          "flex-direction": "column",
          "height": "100%"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "align-items": "center",
                  "flex-grow": "1",
                  "min-width": "0",
                  "cursor": "pointer"
                },
                "customRowAction": {
                  "action": "defaultClick"
                },
                "children": [
                  {
                    "elmType": "img",
                    "attributes": {
                      "src": "=getUserImage([$Author.email], 'S')",
                      "title": "[$Author.title]"
                    },
                    "style": {
                      "width": "36px",
                      "height": "36px",
                      "border-radius": "50%",
                      "margin-right": "12px",
                      "flex-shrink": "0"
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "min-width": "0",
                      "overflow": "hidden"
                    },
                    "children": [
                      {
                        "elmType": "p",
                        "attributes": {
                          "class": "ms-fontColor-neutralPrimary"
                        },
                        "style": {
                          "font-weight": "600",
                          "margin": "0",
                          "font-size": "14px",
                          "white-space": "nowrap",
                          "overflow": "hidden",
                          "text-overflow": "ellipsis"
                        },
                        "txtContent": "[$Author.title]"
                      },
                      {
                        "elmType": "p",
                        "attributes": {
                          "class": "ms-fontColor-neutralSecondary"
                        },
                        "style": {
                          "margin": "2px 0 0 0",
                          "font-size": "12px"
                        },
                        "txtContent": "[$Created.displayValue]"
                      }
                    ]
                  }
                ]
              },
              {
                "elmType": "button",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary",
                  "title": "More options"
                },
                "style": {
                  "font-size": "20px",
                  "font-weight": "600",
                  "cursor": "pointer",
                  "padding": "2px 10px",
                  "border-radius": "4px",
                  "line-height": "1",
                  "user-select": "none",
                  "background": "transparent",
                  "border": "none",
                  "flex-shrink": "0"
                },
                "customCardProps": {
                  "openOnEvent": "click",
                  "directionalHint": "bottomCenter",
                  "isBeakVisible": true,
                  "formatter": {
                    "elmType": "div",
                    "style": {
                      "min-width": "180px"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "txtContent": "Delete item",
                        "attributes": {
                          "class": "ms-fontColor-redDark",
                          "title": "Move this item to the recycle bin"
                        },
                        "style": {
                          "padding": "12px 16px",
                          "cursor": "pointer",
                          "font-size": "14px"
                        },
                        "customRowAction": {
                          "action": "delete"
                        }
                      }
                    ]
                  }
                },
                "txtContent": "⋯"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-css-borderColor-themePrimary"
            },
            "style": {
              "border-width": "1px",
              "border-style": "solid",
              "border-radius": "6px",
              "padding": "22px 16px 14px 16px",
              "position": "relative",
              "margin-top": "20px",
              "margin-bottom": "8px",
              "cursor": "pointer",
              "box-sizing": "border-box"
            },
            "customRowAction": {
              "action": "defaultClick"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-bgColor-themePrimary ms-fontColor-white"
                },
                "style": {
                  "position": "absolute",
                  "top": "-11px",
                  "left": "16px",
                  "padding": "3px 12px",
                  "border-radius": "4px",
                  "font-size": "11px",
                  "font-weight": "600",
                  "letter-spacing": "0.5px"
                },
                "txtContent": "=toUpperCase([$Title])"
              },
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralPrimary"
                },
                "style": {
                  "font-size": "14px",
                  "line-height": "1.4",
                  "margin": "0",
                  "word-break": "break-word",
                  "display": "-webkit-box",
                  "-webkit-line-clamp": "2",
                  "-webkit-box-orient": "vertical",
                  "overflow": "hidden"
                },
                "txtContent": "[$Description]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-css-borderColor-neutralLight"
            },
            "style": {
              "display": "flex",
              "align-items": "center",
              "flex-wrap": "wrap",
              "padding": "10px 4px 4px 4px",
              "margin-top": "auto",
              "border-top-width": "1px",
              "border-top-style": "solid"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "=if(indexOf([$LikedBy.email], @me) > -1, 'ms-fontColor-themePrimary', 'ms-fontColor-neutralSecondary')",
                  "title": "=if(indexOf([$LikedBy.email], @me) > -1, 'Unlike', 'Like')"
                },
                "style": {
                  "margin": "0 12px 0 0",
                  "font-size": "13px",
                  "cursor": "pointer",
                  "padding": "6px 10px",
                  "border-radius": "4px",
                  "font-weight": "=if(indexOf([$LikedBy.email], @me) > -1, '600', '400')",
                  "line-height": "1"
                },
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "LikedBy": "=if(indexOf([$LikedBy.email], @me) > -1, removeFrom([$LikedBy.email], @me), appendTo([$LikedBy.email], @me))"
                  }
                },
                "txtContent": "=if(length([$LikedBy]) > 0, '👍 ' + toString(length([$LikedBy])) + ' ' + if(indexOf([$LikedBy.email], @me) > -1, 'Liked', 'Like'), '👍 Like')"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary",
                  "title": "View details and comments"
                },
                "style": {
                  "font-size": "13px",
                  "cursor": "pointer",
                  "padding": "6px 10px",
                  "border-radius": "4px",
                  "line-height": "1"
                },
                "customRowAction": {
                  "action": "defaultClick"
                },
                "txtContent": "💬 Comment"
              },
              {
                "elmType": "div",
                "style": {
                  "flex-grow": "1",
                  "min-width": "8px"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "display": "=if(indexOf([$LikedBy.email], @me) > -1, 'flex', 'none')",
                  "align-items": "center",
                  "font-size": "13px"
                },
                "attributes": {
                  "class": "ms-fontColor-themePrimary",
                  "title": "You liked this"
                },
                "children": [
                  {
                    "elmType": "span",
                    "style": {
                      "margin-right": "6px"
                    },
                    "txtContent": "👍"
                  },
                  {
                    "elmType": "span",
                    "style": {
                      "font-weight": "600"
                    },
                    "txtContent": "You"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}