Contact Custom Avatar Card

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": "230",
  "width": "250",
  "formatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "align-items": "center",
      "justify-content": "flex-start",
      "padding": "16px",
      "gap": "12px",
      "background-color": "white",
      "border-radius": "12px",
      "overflow": "hidden",
      "box-shadow": "0 2px 8px rgba(0,0,0,0.12)",
      "margin": "8px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "64px",
          "height": "64px",
          "border-radius": "50%",
          "overflow": "hidden",
          "background-color": "=if([$Email.email], '#e81123', '#1078D4')",
          "display": "flex",
          "align-items": "center",
          "justify-content": "center",
          "font-weight": "600",
          "font-size": "24px",
          "color": "white",
          "box-shadow": "0 2px 6px rgba(0,0,0,0.25)",
          "text-transform": "uppercase"
        },
        "txtContent": "=if([$Email.title], substring([$Email.title], 0, 1), '?')"
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "column",
          "align-items": "center",
          "gap": "6px",
          "text-align": "center"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "font-size": "16px",
              "font-weight": "600",
              "color": "#323130"
            },
            "txtContent": "[$Email.title]"
          },
          {
            "elmType": "div",
            "style": {
              "font-size": "13px",
              "color": "#605e5c"
            },
            "txtContent": "=if([$Email.email], [$Email.email], 'No email available')"
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "row",
          "gap": "16px",
          "margin-top": "6px"
        },
        "children": [
          {
            "elmType": "a",
            "attributes": {
              "href": "=if([$Email.email], 'mailto:' + [$Email.email], '')",
              "target": "_blank"
            },
            "style": {
              "text-decoration": "none",
              "cursor": "pointer",
              "display": "flex",
              "align-items": "center",
              "gap": "4px",
              "color": "#e81123",
              "font-size": "13px",
              "font-weight": "500"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "iconName": "Mail"
                },
                "style": {
                  "font-size": "16px"
                }
              },
              {
                "elmType": "span",
                "txtContent": "Email"
              }
            ]
          },
          {
            "elmType": "a",
            "attributes": {
              "href": "=if([$Email.email], 'https://teams.microsoft.com/l/chat/0/0?users=' + [$Email.email], '')",
              "target": "_blank"
            },
            "style": {
              "text-decoration": "none",
              "cursor": "pointer",
              "display": "flex",
              "align-items": "center",
              "gap": "4px",
              "color": "#6264a7",
              "font-size": "13px",
              "font-weight": "500"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "iconName": "TeamsLogo"
                },
                "style": {
                  "font-size": "16px"
                }
              },
              {
                "elmType": "span",
                "txtContent": "Chat"
              }
            ]
          }
        ]
      }
    ]
  }
}