SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Image Card Tiles

This sample shows images in a tile layout using SharePoint's Gallery view. Each image tile is clickable and opens a link from another column.

Get this format View on GitHub

Shared by Nanddeep Nachan, Smita Nachan
Updated Aug 11, 2025

Image Card Tiles formatting preview
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.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": "100px",
  "width": "180px",
  "formatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "align-items": "center",
      "border-radius": "12px",
      "box-shadow": "0 4px 12px rgba(0,0,0,0.1)",
      "background-color": "#ffffff",
      "overflow": "hidden",
      "text-decoration": "none",
      "margin": "10px",
      "padding": "0"
    },
    "children": [
      {
        "elmType": "a",
        "attributes": {
          "href": "[$URL]",
          "target": "_blank"
        },
        "style": {
          "display": "flex",
          "flex-direction": "column",
          "align-items": "center",
          "text-decoration": "none",
          "padding": "20px",
          "box-sizing": "border-box",
          "width": "100%",
          "height": "100%"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "[$ImageURL]",
              "alt": "[$Title]"
            },
            "style": {
              "width": "100%",
              "height": "100%",
              "object-fit": "contain"
            }
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionimage-card-tiles.json
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.

  • /height must match pattern "^[0-9]+$"

From the contributor

How to use this sample

Summary

This sample displays images in a visually appealing tile layout with modern styling using SharePoint's Gallery view. Each image tile is clickable and navigates to a URL specified in another column. The tiles feature rounded corners, shadow effects, and a clean design that works well for image galleries, catalogs, or showcase layouts.

Note: This is a view formatter (tile formatter) that should be applied to a Gallery view, not a column formatter.

screenshot of the sample

View requirements

  • Create a view based on Gallery layout
  • Apply this formatter to the tile view
Type Internal Name Required Purpose
Single line of text Title Yes Accessibility alt text
Hyperlink or Picture ImageURL Yes Image URL
Hyperlink or Picture URL No Contains the target link

[!NOTE]
If images from external sites are specified for ImageURL, HTML field security must be set. For more information see: Allow or restrict the ability to embed content on SharePoint pages.

Sample

Solution Author(s)
image-card-tiles.json Nanddeep Nachan, Smita Nachan

Version history

Version Date Comments
1.0 August 11, 2025 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.

How it works

This formatter creates a modern tile-based layout for displaying images in a SharePoint list or library gallery view with the following features:

Structure:

  1. Container: A flex container with rounded corners and shadow effect
  2. Clickable Link: The entire tile is wrapped in an anchor tag that links to the URL column
  3. Image Display: Images are displayed using object-fit: contain to maintain aspect ratio
  4. Responsive Design: The tiles maintain consistent dimensions while adapting to different screen sizes

Key Features:

  • Modern Styling: Clean design with rounded corners, shadows, and proper spacing
  • Accessibility: Includes proper alt text from the Title column
  • Link Integration: Seamlessly integrates with URL columns for navigation
  • Consistent Layout: Fixed tile dimensions ensure uniform appearance
  • Visual Feedback: Hover and focus states provide user interaction feedback

Browser Compatibility:

This formatter uses modern CSS properties including flexbox, object-fit, and box-shadow, which are supported in all modern browsers.

Additional notes

Customization Options:

  • Tile dimensions: Adjust the height and width properties at the top level (currently set to 100px height and 180px width)
  • Border radius: Modify the border-radius value on line 11 to change the rounded corner effect (currently 12px)
  • Shadow effect: Customize the box-shadow on line 12 for different shadow styles
  • Spacing: Adjust the margin property on line 16 to change spacing between tiles (currently 10px)
  • Link behavior: Change the target attribute on line 24 to control how links open:
    • "_blank" - Opens in a new window/tab (current setting)
    • "_self" - Opens in the same window
  • Image fit: Modify the object-fit property on line 46 to control how images are displayed within the tile:
    • "contain" - Shows the entire image (current setting)
    • "cover" - Fills the tile, may crop image
    • "fill" - Stretches image to fill tile

Column References:

  • [$URL]: References the URL column containing the target link
  • [$ImageURL]: References the image URL from the image column
  • [$Title]: References the title column for accessibility alt text

Keep exploring

More formats like this

Course Training Tile Cards

Modern tile card layout for displaying training courses with images, badges, and hover previews in SharePoint Gallery view.

Explore format

Picture Link Tiles - Collapsible

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

Explore format

Icon Link Tiles

This sample uses tileProps element to create tile layout on the view. This layout allow users to see the list as the promoted links app (including the power the security trimming on the items). This sample uses the Icons from the Microsoft UI Fabric. The name of the icon is referenced through an Icon field.

Explore format