View formattingSharePoint Online

Picture Link Tiles - Collapsible

Creates a card-style tile view in a SharePoint list with expand and collapse functionality.

Get this format View on GitHub

Shared by Watana
Updated Jan 7, 2026

Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Definition

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "txtContent": "@group.fieldData.displayValue",
      "attributes": {
        "class": "ms-fontColor-themeDark ms-bgColor-themeLighter"
      },
      "style": {
        "border-left": "10px solid",
        "display": "flex",
        "flex-direction": "row",
        "width": "98%",
        "height": "50px",
        "margin-top": "10px",
        "margin-bottom": "10px",
        "padding-left": "20px",
        "font-size": "20px"
      }
    }
  },
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "margin": "22px 0 12px 44px",
      "gap": "24px",
      "flex-wrap": "wrap"
    },
    "children": [
      {
        "comm": "1",
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt"
        },
        "style": {
          "display": "=if([$Title1],'flex','none')",
          "flex-direction": "column",
          "width": "226px",
          "height": "180px",
          "border": "1px solid #ccc",
          "border-radius": "10px",
          "box-shadow": "0 3px 10px rgba(0,0,0,.2)",
          "overflow": "hidden"
        },
        "children": [
          {
            "elmType": "a",
            "attributes": {
              "class": "ms-fontColor-themeDark ms-bgColor-themeDark",
              "href": "[$Link1]",
              "target": "_blank"
            },
            "style": {
              "height": "65%",
              "cursor": "=if([$Link1],'pointer','default')"
            },
            "children": [
              {
                "elmType": "img",
                "attributes": {
                  "src": "=getThumbnailImage([$Image1], 300, 300)"
                },
                "style": {
                  "display": "=if([$Image1],'','none')",
                  "object-fit": "cover",
                  "height": "100%",
                  "width": "100%"
                }
              }
            ]
          },
          {
            "txtContent": "[$Title1]",
            "elmType": "div",
            "attributes": {
              "class": "ms-fontWeight-bold ms-fontColor-neutralPrimary"
            },
            "style": {
              "border-top": "2px solid",
              "display": "flex",
              "height": "35%",
              "padding": "0 10px 4px 15px",
              "align-items": "center"
            }
          }
        ]
      },
      {
        "comm": "2",
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt"
        },
        "style": {
          "display": "=if([$Title2],'flex','none')",
          "flex-direction": "column",
          "width": "226px",
          "height": "180px",
          "border": "1px solid #ccc",
          "border-radius": "10px",
          "box-shadow": "0 3px 10px rgba(0,0,0,.2)",
          "overflow": "hidden"
        },
        "children": [
          {
            "elmType": "a",
            "attributes": {
              "class": "ms-fontColor-themeDark ms-bgColor-themeDark",
              "href": "[$Link2]",
              "target": "_blank"
            },
            "style": {
              "height": "65%",
              "cursor": "=if([$Link2],'pointer','default')"
            },
            "children": [
              {
                "elmType": "img",
                "attributes": {
                  "src": "=getThumbnailImage([$Image2], 300, 300)"
                },
                "style": {
                  "display": "=if([$Image2],'','none')",
                  "object-fit": "cover",
                  "height": "100%",
                  "width": "100%"
                }
              }
            ]
          },
          {
            "txtContent": "[$Title2]",
            "elmType": "div",
            "attributes": {
              "class": "ms-fontWeight-bold ms-fontColor-neutralPrimary"
            },
            "style": {
              "border-top": "2px solid",
              "display": "flex",
              "height": "35%",
              "padding": "0 10px 4px 15px",
              "align-items": "center"
            }
          }
        ]
      },
      {
        "comm": "3",
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt"
        },
        "style": {
          "display": "=if([$Title3],'flex','none')",
          "flex-direction": "column",
          "width": "226px",
          "height": "180px",
          "border": "1px solid #ccc",
          "border-radius": "10px",
          "box-shadow": "0 3px 10px rgba(0,0,0,.2)",
          "overflow": "hidden"
        },
        "children": [
          {
            "elmType": "a",
            "attributes": {
              "class": "ms-fontColor-themeDark ms-bgColor-themeDark",
              "href": "[$Link3]",
              "target": "_blank"
            },
            "style": {
              "height": "65%",
              "cursor": "=if([$Link3],'pointer','default')"
            },
            "children": [
              {
                "elmType": "img",
                "attributes": {
                  "src": "=getThumbnailImage([$Image3], 300, 300)"
                },
                "style": {
                  "display": "=if([$Image3],'','none')",
                  "object-fit": "cover",
                  "height": "100%",
                  "width": "100%"
                }
              }
            ]
          },
          {
            "txtContent": "[$Title3]",
            "elmType": "div",
            "attributes": {
              "class": "ms-fontWeight-bold ms-fontColor-neutralPrimary"
            },
            "style": {
              "border-top": "2px solid",
              "display": "flex",
              "height": "35%",
              "padding": "0 10px 4px 15px",
              "align-items": "center"
            }
          }
        ]
      },
      {
        "comm": "4",
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt"
        },
        "style": {
          "display": "=if([$Title4],'flex','none')",
          "flex-direction": "column",
          "width": "226px",
          "height": "180px",
          "border": "1px solid #ccc",
          "border-radius": "10px",
          "box-shadow": "0 3px 10px rgba(0,0,0,.2)",
          "overflow": "hidden"
        },
        "children": [
          {
            "elmType": "a",
            "attributes": {
              "class": "ms-fontColor-themeDark ms-bgColor-themeDark",
              "href": "[$Link4]",
              "target": "_blank"
            },
            "style": {
              "height": "65%",
              "cursor": "=if([$Link4],'pointer','default')"
            },
            "children": [
              {
                "elmType": "img",
                "attributes": {
                  "src": "=getThumbnailImage([$Image4], 300, 300)"
                },
                "style": {
                  "display": "=if([$Image4],'','none')",
                  "object-fit": "cover",
                  "height": "100%",
                  "width": "100%"
                }
              }
            ]
          },
          {
            "txtContent": "[$Title4]",
            "elmType": "div",
            "attributes": {
              "class": "ms-fontWeight-bold ms-fontColor-neutralPrimary"
            },
            "style": {
              "border-top": "2px solid",
              "display": "flex",
              "height": "35%",
              "padding": "0 10px 4px 15px",
              "align-items": "center"
            }
          }
        ]
      },
      {
        "comm": "5",
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt"
        },
        "style": {
          "display": "=if([$Title5],'flex','none')",
          "flex-direction": "column",
          "width": "226px",
          "height": "180px",
          "border": "1px solid #ccc",
          "border-radius": "10px",
          "box-shadow": "0 3px 10px rgba(0,0,0,.2)",
          "overflow": "hidden"
        },
        "children": [
          {
            "elmType": "a",
            "attributes": {
              "class": "ms-fontColor-themeDark ms-bgColor-themeDark",
              "href": "[$Link5]",
              "target": "_blank"
            },
            "style": {
              "height": "65%",
              "cursor": "=if([$Link5],'pointer','default')"
            },
            "children": [
              {
                "elmType": "img",
                "attributes": {
                  "src": "=getThumbnailImage([$Image5], 300, 300)"
                },
                "style": {
                  "display": "=if([$Image5],'','none')",
                  "object-fit": "cover",
                  "height": "100%",
                  "width": "100%"
                }
              }
            ]
          },
          {
            "txtContent": "[$Title5]",
            "elmType": "div",
            "attributes": {
              "class": "ms-fontWeight-bold ms-fontColor-neutralPrimary"
            },
            "style": {
              "border-top": "2px solid",
              "display": "flex",
              "height": "35%",
              "padding": "0 10px 4px 15px",
              "align-items": "center"
            }
          }
        ]
      }
    ]
  }
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "txtContent": "@group.fieldData.displayValue",
      "attributes": {
        "class": "ms-fontColor-themeDark ms-bgColor-themeLighter"
      },
      "style": {
        "border-left": "10px solid",
        "display": "flex",
        "flex-direction": "row",
        "width": "98%",
        "height": "50px",
        "margin-top": "10px",
        "margin-bottom": "10px",
        "padding-left": "20px",
        "font-size": "20px"
      }
    }
  },
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "margin": "22px 0 12px 44px",
      "gap": "24px",
      "flex-wrap": "wrap"
    },
    "children": [
      {
        "comm": "1",
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt"
        },
        "style": {
          "display": "=if([$Title1],'flex','none')",
          "flex-direction": "column",
          "width": "226px",
          "height": "180px",
          "border": "1px solid #ccc",
          "border-radius": "10px",
          "box-shadow": "0 3px 10px rgba(0,0,0,.2)",
          "overflow": "hidden"
        },
        "children": [
          {
            "elmType": "a",
            "attributes": {
              "class": "ms-fontColor-themeDark ms-bgColor-themeDark",
              "href": "[$Link1]",
              "target": "_blank"
            },
            "style": {
              "height": "65%",
              "cursor": "=if([$Link1],'pointer','default')"
            },
            "children": [
              {
                "elmType": "img",
                "attributes": {
                  "src": "=getThumbnailImage([$Image1], 300, 300)"
                },
                "style": {
                  "display": "=if([$Image1],'','none')",
                  "object-fit": "cover",
                  "height": "100%",
                  "width": "100%"
                }
              }
            ]
          },
          {
            "txtContent": "[$Title1]",
            "elmType": "div",
            "attributes": {
              "class": "ms-fontWeight-bold ms-fontColor-neutralPrimary"
            },
            "style": {
              "border-top": "2px solid",
              "display": "flex",
              "height": "35%",
              "padding": "0 10px 4px 15px",
              "align-items": "center"
            }
          }
        ]
      },
      {
        "comm": "2",
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt"
        },
        "style": {
          "display": "=if([$Title2],'flex','none')",
          "flex-direction": "column",
          "width": "226px",
          "height": "180px",
          "border": "1px solid #ccc",
          "border-radius": "10px",
          "box-shadow": "0 3px 10px rgba(0,0,0,.2)",
          "overflow": "hidden"
        },
        "children": [
          {
            "elmType": "a",
            "attributes": {
              "class": "ms-fontColor-themeDark ms-bgColor-themeDark",
              "href": "[$Link2]",
              "target": "_blank"
            },
            "style": {
              "height": "65%",
              "cursor": "=if([$Link2],'pointer','default')"
            },
            "children": [
              {
                "elmType": "img",
                "attributes": {
                  "src": "=getThumbnailImage([$Image2], 300, 300)"
                },
                "style": {
                  "display": "=if([$Image2],'','none')",
                  "object-fit": "cover",
                  "height": "100%",
                  "width": "100%"
                }
              }
            ]
          },
          {
            "txtContent": "[$Title2]",
            "elmType": "div",
            "attributes": {
              "class": "ms-fontWeight-bold ms-fontColor-neutralPrimary"
            },
            "style": {
              "border-top": "2px solid",
              "display": "flex",
              "height": "35%",
              "padding": "0 10px 4px 15px",
              "align-items": "center"
            }
          }
        ]
      },
      {
        "comm": "3",
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt"
        },
        "style": {
          "display": "=if([$Title3],'flex','none')",
          "flex-direction": "column",
          "width": "226px",
          "height": "180px",
          "border": "1px solid #ccc",
          "border-radius": "10px",
          "box-shadow": "0 3px 10px rgba(0,0,0,.2)",
          "overflow": "hidden"
        },
        "children": [
          {
            "elmType": "a",
            "attributes": {
              "class": "ms-fontColor-themeDark ms-bgColor-themeDark",
              "href": "[$Link3]",
              "target": "_blank"
            },
            "style": {
              "height": "65%",
              "cursor": "=if([$Link3],'pointer','default')"
            },
            "children": [
              {
                "elmType": "img",
                "attributes": {
                  "src": "=getThumbnailImage([$Image3], 300, 300)"
                },
                "style": {
                  "display": "=if([$Image3],'','none')",
                  "object-fit": "cover",
                  "height": "100%",
                  "width": "100%"
                }
              }
            ]
          },
          {
            "txtContent": "[$Title3]",
            "elmType": "div",
            "attributes": {
              "class": "ms-fontWeight-bold ms-fontColor-neutralPrimary"
            },
            "style": {
              "border-top": "2px solid",
              "display": "flex",
              "height": "35%",
              "padding": "0 10px 4px 15px",
              "align-items": "center"
            }
          }
        ]
      },
      {
        "comm": "4",
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt"
        },
        "style": {
          "display": "=if([$Title4],'flex','none')",
          "flex-direction": "column",
          "width": "226px",
          "height": "180px",
          "border": "1px solid #ccc",
          "border-radius": "10px",
          "box-shadow": "0 3px 10px rgba(0,0,0,.2)",
          "overflow": "hidden"
        },
        "children": [
          {
            "elmType": "a",
            "attributes": {
              "class": "ms-fontColor-themeDark ms-bgColor-themeDark",
              "href": "[$Link4]",
              "target": "_blank"
            },
            "style": {
              "height": "65%",
              "cursor": "=if([$Link4],'pointer','default')"
            },
            "children": [
              {
                "elmType": "img",
                "attributes": {
                  "src": "=getThumbnailImage([$Image4], 300, 300)"
                },
                "style": {
                  "display": "=if([$Image4],'','none')",
                  "object-fit": "cover",
                  "height": "100%",
                  "width": "100%"
                }
              }
            ]
          },
          {
            "txtContent": "[$Title4]",
            "elmType": "div",
            "attributes": {
              "class": "ms-fontWeight-bold ms-fontColor-neutralPrimary"
            },
            "style": {
              "border-top": "2px solid",
              "display": "flex",
              "height": "35%",
              "padding": "0 10px 4px 15px",
              "align-items": "center"
            }
          }
        ]
      },
      {
        "comm": "5",
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt"
        },
        "style": {
          "display": "=if([$Title5],'flex','none')",
          "flex-direction": "column",
          "width": "226px",
          "height": "180px",
          "border": "1px solid #ccc",
          "border-radius": "10px",
          "box-shadow": "0 3px 10px rgba(0,0,0,.2)",
          "overflow": "hidden"
        },
        "children": [
          {
            "elmType": "a",
            "attributes": {
              "class": "ms-fontColor-themeDark ms-bgColor-themeDark",
              "href": "[$Link5]",
              "target": "_blank"
            },
            "style": {
              "height": "65%",
              "cursor": "=if([$Link5],'pointer','default')"
            },
            "children": [
              {
                "elmType": "img",
                "attributes": {
                  "src": "=getThumbnailImage([$Image5], 300, 300)"
                },
                "style": {
                  "display": "=if([$Image5],'','none')",
                  "object-fit": "cover",
                  "height": "100%",
                  "width": "100%"
                }
              }
            ]
          },
          {
            "txtContent": "[$Title5]",
            "elmType": "div",
            "attributes": {
              "class": "ms-fontWeight-bold ms-fontColor-neutralPrimary"
            },
            "style": {
              "border-top": "2px solid",
              "display": "flex",
              "height": "35%",
              "padding": "0 10px 4px 15px",
              "align-items": "center"
            }
          }
        ]
      }
    ]
  }
}

Schema compatibility review notes

This historical definition differs from the pinned Microsoft schema. This may indicate an unsupported pattern or a schema limitation. Check the original requirements and test in your tenant before use.

/rowFormatter/children/0 must NOT have additional properties

.definition[hidden] { display:block !important; } .variant-chooser,[data-copy] { display:none; }All definitions are shown below. Select the code manually or download the JSON file.

From the contributor

How to use this sample

# Picture Link Tiles - Collapsible

Summary

Currently, Gallery view allows formatting of group headers, but it does not support built-in or JSON-based expand and collapse behavior like List view. This sample demonstrates how to render list items as cards, where you can choose which field values are displayed within each card and define target links.

Sample screenshot

Columns screenshot

View requirements

Column Name	Type	Setting
Title	Single line of text	Group by column
Title1	Single line of text
Title2	Single line of text
Title3	Single line of text
Title4	Single line of text
Title5	Single line of text
Link1	Hyperlink
Link2	Hyperlink
Link3	Hyperlink
Link4	Hyperlink
Link5	Hyperlink
Image1	Image
Image2	Image
Image3	Image
Image4	Image
Image5	Image

[!NOTE] All columns must be included in the view and grouped by the Title column.

Sample

Solution	Author(s)
picture-link-tiles-collapsible.json	Watana

Version history

Version	Date	Comments
1.0	January 7, 2026	Initial release.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Get this format

How to use this sample

Summary

View requirements

Sample

Version history

Disclaimer

More formats like this

Course Training Tile Cards

Icon Link Tiles

Photo Gallery with Description, Link and Likes