SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Course Training Tile Cards

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

Get this format View on GitHub

Shared by Sai Bandaru
Updated Feb 13, 2026

Course training tiles view
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": 350,
  "width": 280,
  "hideSelection": true,
  "fillHorizontally": false,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "a",
        "attributes": {
          "class": "sp-card-defaultClickButton",
          "role": "link",
          "aria-label": "=[$Title]",
          "href": "[$URL]",
          "target": "=if ([$URL] == '', '', '_blank')"
        },
        "customCardProps": {
          "openOnEvent": "hover",
          "directionalHint": "rightCenter",
          "isBeakVisible": true,
          "formatter": {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "style": {
              "display": "block",
              "max-width": "300px",
              "padding": "20px",
              "background-color": "#ffffff",
              "box-shadow": "0 2px 8px rgba(0,0,0,0.1)"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "font-size": "1.3em",
                  "font-weight": "600",
                  "color": "#000000",
                  "padding-bottom": "10px",
                  "word-wrap": "break-word"
                },
                "txtContent": "[$Title]"
              },
              {
                "elmType": "div",
                "style": {
                  "font-size": "1em",
                  "font-weight": "400",
                  "color": "#333333",
                  "line-height": "1.5"
                },
                "txtContent": "[$Description]"
              }
            ]
          }
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "style": {
          "background-color": "#ffffff",
          "border-radius": "4px",
          "overflow": "hidden",
          "box-shadow": "0 1px 3px rgba(0,0,0,0.12)"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-imageContainer"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "height": "160px",
                      "border-bottom": "1px solid #cccccc",
                      "position": "relative",
                      "overflow": "hidden"
                    },
                    "attributes": {
                      "class": "ms-bgColor-neutralLight sp-card-imagePreviewBackground"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "style": {
                          "height": "160px",
                          "width": "100%",
                          "object-fit": "cover"
                        },
                        "attributes": {
                          "src": "=if([$Image] == '', @currentWeb + '/SiteAssets/Images/tile-default.png', getThumbnailImage([$Image], 400, 400))",
                          "alt": "=[$Title]",
                          "class": "sp-card-imagePreview"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Visual]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content"
                },
                "style": {
                  "font-size": "0.85em",
                  "font-weight": "600",
                  "color": "#666666",
                  "text-transform": "uppercase",
                  "padding-top": "10px",
                  "letter-spacing": "0.5px"
                },
                "txtContent": "=if ([$Visual] == '', '–', [$Visual])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "sp-card-multiline",
                  "title": "[$Title]"
                },
                "style": {
                  "font-size": "1.3em",
                  "font-weight": "600",
                  "color": "#000000",
                  "min-height": "80px",
                  "max-height": "80px",
                  "word-break": "break-word",
                  "overflow": "hidden",
                  "display": "-webkit-box",
                  "-webkit-line-clamp": "3",
                  "-webkit-box-orient": "vertical",
                  "line-height": "1.4"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Sponsor]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content"
                },
                "style": {
                  "font-size": "0.95em",
                  "font-weight": "600",
                  "color": "#666666"
                },
                "txtContent": {
                  "operator": "+",
                  "operands": [
                    "Sponsored: ",
                    "=if ([$Sponsor] == '', '–', [$Sponsor])"
                  ]
                }
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "style": {
                  "font-size": "0.9em",
                  "font-weight": "600",
                  "color": "#ffffff",
                  "background-color": "#fc1921cc",
                  "padding": "3px 10px",
                  "display": "=if ([$Flag] == '', 'none', 'inline-block')",
                  "position": "absolute",
                  "top": "6px",
                  "right": "5px",
                  "border-radius": "5px 0 10px 0"
                },
                "txtContent": "=if ([$Flag] == '', '-', [$Flag])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "style": {
                  "font-size": "0.9em",
                  "font-weight": "600",
                  "color": "#ffffff",
                  "background-color": "#00000077",
                  "padding": "3px 10px",
                  "display": "=if ([$Hours], 'inline-block', 'none')",
                  "position": "absolute",
                  "top": "140px",
                  "right": "6px",
                  "border-radius": "10px 0 0 0"
                },
                "txtContent": {
                  "operator": "+",
                  "operands": [
                    "=if ([$Hours] >= 1, floor([$Hours]), floor([$Hours] * 60))",
                    " ",
                    "=if ([$Hours] >= 1, 'Hours', 'Min')"
                  ]
                }
              }
            ]
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitioncourse-training-tiles.json

From the contributor

How to use this sample

Summary

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

screenshot of the sample

Fields Required

Column Type Required
Title Single line of text Yes
Image Image No
Visual Choice No
Sponsor Single line of text No
Description Multiple lines of text No
Hours Number No
Flag Choice No
URL Hyperlink or Picture Yes

[!NOTE] If no image is provided in the Image column, this sample displays the image located in the “SiteAssets” library > “Images” folder > “tile-default.png” within the site (line 108). Update the image file or path as needed.

Features

  • 280×350px tile cards with course thumbnails
  • Hover popup showing title and description
  • Duration badge (auto-converts to hours/minutes)
  • Flag badge for highlighting courses
  • Responsive image with fallback to default
  • Direct link to course content

Sample

Solution Author(s)
course-training-tiles.json Sai Bandaru

Version History

Version Date Comments
1.0 February 13, 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.

Keep exploring

More formats like this

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

Photo Gallery with Description, Link and Likes

This sample demonstrates formatting a document library gallery view into a photo gallery showing title, description, hyperlink and likes.

Explore format