SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Sports Card

This SharePoint JSON view formatting sample transforms list items into vertical sports trading cards with header bar, country badge, player silhouette, name band, star rating and three stat bars.

Get this format View on GitHub

Shared by Sudeep Ghatak
Updated Jul 23, 2026

Sports Card 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/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "max-width": "740px",
      "min-height": "170px",
      "margin": "12px auto",
      "background-color": "[$BackgroundColor]",
      "color": "#ffffff",
      "border-radius": "10px",
      "overflow": "hidden",
      "font-family": "Arial, sans-serif",
      "box-shadow": "0 8px 22px rgba(0,0,0,0.5)"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "170px",
          "flex-shrink": "0",
          "background-color": "rgba(255,255,255,0.06)",
          "position": "relative",
          "display": "flex",
          "align-items": "center",
          "justify-content": "center"
        },
        "children": [
          {
            "elmType": "span",
            "attributes": {
              "iconName": "[$PlayerIcon]"
            },
            "style": {
              "font-size": "110px",
              "color": "rgba(255,255,255,0.85)"
            }
          },
          {
            "elmType": "div",
            "txtContent": "[$Country]",
            "style": {
              "position": "absolute",
              "bottom": "10px",
              "left": "10px",
              "background-color": "[$AccentColor]",
              "padding": "4px 10px",
              "border-radius": "3px",
              "font-size": "10px",
              "font-weight": "bold",
              "letter-spacing": "2px",
              "color": "#ffffff"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "min-width": "0",
          "padding": "14px 18px",
          "display": "flex",
          "flex-direction": "column",
          "justify-content": "space-between"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "justify-content": "space-between"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "[$Sport]",
                "style": {
                  "font-size": "12px",
                  "font-weight": "bold",
                  "letter-spacing": "3px",
                  "text-transform": "uppercase",
                  "color": "rgba(255,255,255,0.85)"
                }
              },
              {
                "elmType": "div",
                "txtContent": "=toString([$JerseyNumber])",
                "style": {
                  "background-color": "[$AccentColor]",
                  "padding": "2px 14px",
                  "font-size": "20px",
                  "font-weight": "bold",
                  "border-radius": "4px",
                  "color": "#ffffff",
                  "min-width": "36px",
                  "text-align": "center"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "justify-content": "space-between",
              "margin": "10px 0 8px"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "[$Title]",
                "style": {
                  "font-size": "20px",
                  "font-weight": "bold",
                  "text-transform": "uppercase",
                  "letter-spacing": "1px",
                  "line-height": "22px",
                  "padding-right": "10px"
                }
              },
              {
                "elmType": "span",
                "attributes": {
                  "iconName": "[$SportIcon]"
                },
                "style": {
                  "font-size": "22px",
                  "color": "[$AccentColor]",
                  "flex-shrink": "0"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "txtContent": "[$Rating]",
            "style": {
              "font-size": "14px",
              "color": "[$AccentColor]",
              "letter-spacing": "2px"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "width": "260px",
          "flex-shrink": "0",
          "padding": "14px 16px",
          "border-left": "1px solid rgba(255,255,255,0.12)",
          "display": "flex",
          "flex-direction": "column",
          "justify-content": "space-between"
        },
        "children": [
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "align-items": "center",
                  "padding": "2px 0"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "[$Stat1Label]",
                    "style": {
                      "width": "32px",
                      "font-size": "10px",
                      "font-weight": "bold",
                      "letter-spacing": "1px",
                      "color": "rgba(255,255,255,0.85)"
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "flex-grow": "1",
                      "height": "5px",
                      "background-color": "rgba(255,255,255,0.18)",
                      "border-radius": "3px",
                      "margin": "0 8px",
                      "overflow": "hidden"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "height": "5px",
                          "background-color": "[$AccentColor]",
                          "width": "=toString([$Stat1Value]) + '%'"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "txtContent": "=toString([$Stat1Value])",
                    "style": {
                      "width": "22px",
                      "text-align": "right",
                      "font-size": "10px",
                      "font-weight": "bold"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "align-items": "center",
                  "padding": "2px 0"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "[$Stat2Label]",
                    "style": {
                      "width": "32px",
                      "font-size": "10px",
                      "font-weight": "bold",
                      "letter-spacing": "1px",
                      "color": "rgba(255,255,255,0.85)"
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "flex-grow": "1",
                      "height": "5px",
                      "background-color": "rgba(255,255,255,0.18)",
                      "border-radius": "3px",
                      "margin": "0 8px",
                      "overflow": "hidden"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "height": "5px",
                          "background-color": "[$AccentColor]",
                          "width": "=toString([$Stat2Value]) + '%'"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "txtContent": "=toString([$Stat2Value])",
                    "style": {
                      "width": "22px",
                      "text-align": "right",
                      "font-size": "10px",
                      "font-weight": "bold"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "align-items": "center",
                  "padding": "2px 0"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "[$Stat3Label]",
                    "style": {
                      "width": "32px",
                      "font-size": "10px",
                      "font-weight": "bold",
                      "letter-spacing": "1px",
                      "color": "rgba(255,255,255,0.85)"
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "flex-grow": "1",
                      "height": "5px",
                      "background-color": "rgba(255,255,255,0.18)",
                      "border-radius": "3px",
                      "margin": "0 8px",
                      "overflow": "hidden"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "height": "5px",
                          "background-color": "[$AccentColor]",
                          "width": "=toString([$Stat3Value]) + '%'"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "txtContent": "=toString([$Stat3Value])",
                    "style": {
                      "width": "22px",
                      "text-align": "right",
                      "font-size": "10px",
                      "font-weight": "bold"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "txtContent": "[$Description]",
            "style": {
              "font-size": "10px",
              "line-height": "13px",
              "color": "rgba(255,255,255,0.7)",
              "font-style": "italic",
              "margin-top": "8px"
            }
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionsports-card.json

From the contributor

How to use this sample

Summary

This SharePoint JSON view formatting sample transforms list items into landscape sports trading cards inspired by FIFA / NBA-style collectibles, sized to fit cleanly in a standard List view row (~170 px tall). Each card has a player silhouette panel with country badge on the left, a sport name / jersey number / player name / star rating column in the middle, and three labelled stat bars plus a short description on the right.

It's designed for player rosters, team directories, character lists, or any "collectible" style list.

screenshot of the sample

View requirements

Column Name Internal Name Type Description
Title Title Single line of text Player full name (shown in the name band, uppercase)
Sport Sport Single line of text Sport / league label shown in the header (e.g. FOOTBALL, BASEBALL)
Jersey Number JerseyNumber Number Jersey number shown in the accent-coloured header badge
Country Country Single line of text Country code shown in the top-right badge (e.g. ARG, JPN, USA)
Rating Rating Single line of text Star glyphs (e.g. ★★★★★)
Description Description Multiple lines of text Short paragraph shown at the bottom of the card
Stat 1 Label Stat1Label Single line of text Short label for stat 1 (e.g. PAC for pace, AVG for batting average)
Stat 1 Value Stat1Value Number Value for stat 1 — 0 - 100 (drives the bar fill width)
Stat 2 Label Stat2Label Single line of text Short label for stat 2
Stat 2 Value Stat2Value Number Value for stat 2 — 0 - 100
Stat 3 Label Stat3Label Single line of text Short label for stat 3
Stat 3 Value Stat3Value Number Value for stat 3 — 0 - 100
Accent Color AccentColor Single line of text Hex for the header badge, country badge, name band, stat bars (e.g. #ff2db5)
Background Color BackgroundColor Single line of text Hex for the card background (e.g. #0a1f3a dark navy)
Player Icon PlayerIcon Single line of text Fluent UI icon name for the large silhouette (e.g. Running, Contact)
Sport Icon SportIcon Single line of text Fluent UI icon name shown next to the player name (e.g. Trophy, Soccer)

A PowerShell script has been provided in the assets folder to provision the list for you. The script also seeds 3 sample cards (soccer, baseball, basketball) covering the visual variety in the design.

Note: This script uses PnP PowerShell and requires an environment ready for PnP PowerShell.

Sample

Solution Author
sports-card.json Sudeep Ghatak (LinkedIn)

Version history

Version Date Comments
1.0 July 23, 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.

Additional notes

  • Colours are column-driven. Both BackgroundColor and AccentColor are read directly via [$BackgroundColor] / [$AccentColor]. This avoids unreliable nested if() expressions in style values and lets you re-skin per card without editing the JSON.
  • Icons are column-driven too. Both PlayerIcon (the large central silhouette) and SportIcon (the small glyph next to the player name) use iconName: "[$ColumnName]". Pick any name from the Fluent UI v1 set that ships with SharePoint - common options include Running, Contact, Trophy, Soccer, Basketball, Baseball. If a chosen icon doesn't render in your tenant, swap it for a safe default like Trophy or Running.
  • Stat bars are computed with =toString([$StatNValue]) + '%'. Store integers 0 - 100 and each bar fills proportionally.
  • Rating is stored as plain text so you can paste any star sequence (★★★★★, ★★★★☆, etc.).
  • Card orientation is landscape (740 px max-width, 170 px min-height) so the whole card fits in a single standard List view row. If you'd rather have the portrait FIFA-style look from the original inspiration image, switch the list to a Gallery / Tiles view and use the portrait variant of the JSON.

Keep exploring

More formats like this

Key Dates Timeline Checklist

A modern horizontal timeline view that displays key dates or milestones as monthly columns.

Explore format

Credit / Loyalty Card

Transforms list items into realistic credit / loyalty cards with a brand name, tier pill, EMV chip, contactless symbol, embossed card number, cardholder, expiry, and network logo. The card colour is driven by the Tier value.

Explore format

Spotify Now Playing

Transforms list items into Spotify-style 'now playing' cards with album-art block, status row, track / artist / album, a horizontal progress bar with elapsed and total time, and play / like controls.

Explore format