SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Numeric card format

This sample display formatted number column as playing card.

Get this format View on GitHub

Shared by André Lage
Updated Apr 22, 2022

Numeric card format
Sample preview · View original animation

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/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "position": "relative",
      "width": "200px",
      "text-decoration": "none",
      "float": "left"
    },
    "children": [
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "div",
            "style": {
              "margin": "10px 10px 10px 0",
              "width": "150px",
              "height": "200px",
              "border-radius": "5px",
              "border": "1px solid #eee",
              "box-shadow": "rgba(0, 0, 0, 0.24) 0px 3px 8px",
              "position": "relative"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "margin": "10px 0 0 10px",
                  "font-family": "serif",
                  "font-size": "20px",
                  "color": "[$Color]"
                },
                "txtContent": "[$Number]"
              },
              {
                "elmType": "div",
                "style": {
                  "font-weight": "700",
                  "font-family": "serif",
                  "font-size": "=if(indexOf([$Name]+'.', '.') > 1, '20px','25px')",
                  "margin": "0px 0 0 10px",
                  "color": "[$Color]"
                },
                "txtContent": "[$Name]"
              },
              {
                "elmType": "div",
                "style": {
                  "position": "absolute",
                  "top": "5px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "font-weight": "700",
                          "font-family": "serif",
                          "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                          "margin": "0px 0 0 33px",
                          "width": "20px",
                          "height": "50px",
                          "color": "=if([$Number] == 8,[$Color],if([$Number] == 9,[$Color],if([$Number] == 10,[$Color],'')))"
                        },
                        "txtContent": "=if([$Number] == 8,[$Name],if([$Number] == 9,[$Name],if([$Number] == 10,[$Name],'')))"
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "position": "relative"
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "style": {
                              "position": "absolute",
                              "font-weight": "700",
                              "font-family": "serif",
                              "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                              "margin": "25px 0 0 -20px",
                              "width": "20px",
                              "height": "50px",
                              "color": "=if([$Number] == 4,[$Color],if([$Number] == 5,[$Color],if([$Number] == 6,[$Color],if([$Number] == 7,[$Color],''))))"
                            },
                            "txtContent": "=if([$Number] == 4,[$Name],if([$Number] == 5,[$Name],if([$Number] == 6,[$Name],if([$Number] == 7,[$Name],''))))"
                          },
                          {
                            "elmType": "div",
                            "style": {
                              "position": "absolute",
                              "font-weight": "700",
                              "font-family": "serif",
                              "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                              "margin": "25px 0 0 10px",
                              "width": "20px",
                              "height": "50px",
                              "color": "=if([$Number] == 2,[$Color],if([$Number] == 3,[$Color],''))"
                            },
                            "txtContent": "=if([$Number] == 2,[$Name],if([$Number] == 3,[$Name],''))"
                          },
                          {
                            "elmType": "div",
                            "style": {
                              "position": "absolute",
                              "font-weight": "700",
                              "font-family": "serif",
                              "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                              "margin": "25px 0 0 10px",
                              "width": "20px",
                              "height": "50px",
                              "color": "=if([$Number] == 10,[$Color],'')"
                            },
                            "txtContent": "=if([$Number] == 10,[$Name],'')"
                          },
                          {
                            "elmType": "div",
                            "style": {
                              "position": "absolute",
                              "font-weight": "700",
                              "font-family": "serif",
                              "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                              "margin": "25px 0 0 40px",
                              "width": "20px",
                              "height": "50px",
                              "color": "=if([$Number] == 4,[$Color],if([$Number] == 5,[$Color],if([$Number] == 6,[$Color],if([$Number] == 7,[$Color],''))))"
                            },
                            "txtContent": "=if([$Number] == 4,[$Name],if([$Number] == 5,[$Name],if([$Number] == 6,[$Name],if([$Number] == 7,[$Name],''))))"
                          }
                        ]
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "font-weight": "700",
                          "font-family": "serif",
                          "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                          "margin": "0px 0 0 10px",
                          "width": "20px",
                          "height": "50px"
                        }
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "font-weight": "700",
                          "font-family": "serif",
                          "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                          "margin": "0px 0 0 10px",
                          "width": "20px",
                          "height": "50px",
                          "color": "=if([$Number] == 8,[$Color],if([$Number] == 9,[$Color],if([$Number] == 10,[$Color],'')))"
                        },
                        "txtContent": "=if([$Number] == 8,[$Name],if([$Number] == 9,[$Name],if([$Number] == 10,[$Name],'')))"
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "font-weight": "700",
                          "font-family": "serif",
                          "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                          "margin": "0px 0 0 33px",
                          "width": "20px",
                          "height": "50px",
                          "color": "=if([$Number] == 8,[$Color],if([$Number] == 9,[$Color],if([$Number] == 10,[$Color],'')))"
                        },
                        "txtContent": "=if([$Number] == 8,[$Name],if([$Number] == 9,[$Name],if([$Number] == 10,[$Name],'')))"
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "position": "relative"
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "style": {
                              "position": "absolute",
                              "font-weight": "700",
                              "font-family": "serif",
                              "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                              "margin": "25px 0 0 -20px",
                              "width": "20px",
                              "height": "50px",
                              "color": "=if([$Number] == 6,[$Color],if([$Number] == 7,[$Color],''))"
                            },
                            "txtContent": "=if([$Number] == 6,[$Name],if([$Number] == 7,[$Name],''))"
                          },
                          {
                            "elmType": "div",
                            "style": {
                              "position": "absolute",
                              "font-weight": "700",
                              "font-family": "serif",
                              "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                              "margin": "25px 0 0 10px",
                              "width": "20px",
                              "height": "50px",
                              "color": "=if([$Number] == 1,[$Color],if([$Number] == 3,[$Color],if([$Number] == 5,[$Color],if([$Number] == 9,[$Color],''))))"
                            },
                            "txtContent": "=if([$Number] == 1,[$Name],if([$Number] == 3,[$Name],if([$Number] == 5,[$Name],if([$Number] == 9,[$Name],''))))"
                          },
                          {
                            "elmType": "div",
                            "style": {
                              "position": "absolute",
                              "font-weight": "700",
                              "font-family": "serif",
                              "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                              "margin": "25px 0 0 40px",
                              "width": "20px",
                              "height": "50px",
                              "color": "=if([$Number] == 6,[$Color],if([$Number] == 7,[$Color],''))"
                            },
                            "txtContent": "=if([$Number] == 6,[$Name],if([$Number] == 7,[$Name],''))"
                          }
                        ]
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "font-weight": "700",
                          "font-family": "serif",
                          "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                          "margin": "0px 0 0 10px",
                          "width": "20px",
                          "height": "50px",
                          "color": "=if([$Number] == 7,[$Color],'')"
                        },
                        "txtContent": "=if([$Number] == 7,[$Name],'')"
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "font-weight": "700",
                          "font-family": "serif",
                          "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                          "margin": "0px 0 0 10px",
                          "width": "20px",
                          "height": "50px",
                          "color": "=if([$Number] == 8,[$Color],if([$Number] == 9,[$Color],if([$Number] == 10,[$Color],'')))"
                        },
                        "txtContent": "=if([$Number] == 8,[$Name],if([$Number] == 9,[$Name],if([$Number] == 10,[$Name],'')))"
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "font-weight": "700",
                          "font-family": "serif",
                          "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                          "margin": "0px 0 0 33px",
                          "width": "20px",
                          "height": "50px",
                          "color": "=if([$Number] == 8,[$Color],if([$Number] == 9,[$Color],if([$Number] == 10,[$Color],'')))"
                        },
                        "txtContent": "=if([$Number] == 8,[$Name],if([$Number] == 9,[$Name],if([$Number] == 10,[$Name],'')))"
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "position": "relative"
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "style": {
                              "position": "absolute",
                              "font-weight": "700",
                              "font-family": "serif",
                              "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                              "margin": "25px 0 0 -20px",
                              "width": "20px",
                              "height": "50px",
                              "color": "=if([$Number] == 4,[$Color],if([$Number] == 5,[$Color],if([$Number] == 6,[$Color],if([$Number] == 7,[$Color],''))))"
                            },
                            "txtContent": "=if([$Number] == 4,[$Name],if([$Number] == 5,[$Name],if([$Number] == 6,[$Name],if([$Number] == 7,[$Name],''))))"
                          },
                          {
                            "elmType": "div",
                            "style": {
                              "position": "absolute",
                              "font-weight": "700",
                              "font-family": "serif",
                              "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                              "margin": "25px 0 0 10px",
                              "width": "20px",
                              "height": "50px",
                              "color": "=if([$Number] == 10,[$Color],if([$Number] == 3,[$Color],if([$Number] == 2,[$Color],'')))"
                            },
                            "txtContent": "=if([$Number] == 10,[$Name],if([$Number] == 3,[$Name],if([$Number] == 2,[$Name],'')))"
                          },
                          {
                            "elmType": "div",
                            "style": {
                              "position": "absolute",
                              "font-weight": "700",
                              "font-family": "serif",
                              "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                              "margin": "25px 0 0 40px",
                              "width": "20px",
                              "height": "50px",
                              "color": "=if([$Number] == 4,[$Color],if([$Number] == 5,[$Color],if([$Number] == 6,[$Color],if([$Number] == 7,[$Color],''))))"
                            },
                            "txtContent": "=if([$Number] == 4,[$Name],if([$Number] == 5,[$Name],if([$Number] == 6,[$Name],if([$Number] == 7,[$Name],''))))"
                          }
                        ]
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "font-weight": "700",
                          "font-family": "serif",
                          "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                          "margin": "0px 0 0 40px",
                          "width": "20px",
                          "height": "50px",
                          "color": "=if([$Number] == 8,[$Color],if([$Number] == 9,[$Color],if([$Number] == 10,[$Color],'')))"
                        },
                        "txtContent": "=if([$Number] == 8,[$Name],if([$Number] == 9,[$Name],if([$Number] == 10,[$Name],'')))"
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "font-weight": "700",
                          "font-family": "serif",
                          "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                          "margin": "0px 0 0 33px",
                          "width": "20px",
                          "height": "50px",
                          "color": "=if([$Number] == 8,[$Color],if([$Number] == 9,[$Color],if([$Number] == 10,[$Color],'')))"
                        },
                        "txtContent": "=if([$Number] == 8,[$Name],if([$Number] == 9,[$Name],if([$Number] == 10,[$Name],'')))"
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "font-weight": "700",
                          "font-family": "serif",
                          "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                          "margin": "0px 0 0 10px",
                          "width": "20px",
                          "height": "50px"
                        },
                        "txtContent": " "
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "font-weight": "700",
                          "font-family": "serif",
                          "font-size": "=if(indexOf([$Name]+'.', '.') > 1, if([$Name] == '♠️', '40px','25px'),'40px')",
                          "margin": "0px 0 0 10px",
                          "width": "20px",
                          "height": "50px",
                          "color": "=if([$Number] == 8,[$Color],if([$Number] == 9,[$Color],if([$Number] == 10,[$Color],'')))"
                        },
                        "txtContent": "=if([$Number] == 8,[$Name],if([$Number] == 9,[$Name],if([$Number] == 10,[$Name],'')))"
                      }
                    ]
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "font-weight": "700",
                  "font-family": "serif",
                  "font-size": "=if(indexOf([$Name]+'.', '.') > 1, '20px','25px')",
                  "margin": "80px 0 0 125px",
                  "color": "[$Color]"
                },
                "inlineEditField": "[$Name]",
                "txtContent": "[$Name]"
              },
              {
                "elmType": "div",
                "style": {
                  "margin": "0 0 0 125px",
                  "font-family": "serif",
                  "font-size": "20px",
                  "color": "[$Color]"
                },
                "inlineEditField": "[$Number]",
                "txtContent": "[$Number]"
              }
            ]
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitiongeneric-numeric-card-format.json

From the contributor

How to use this sample

# Numeric card format

Summary

This sample display formatted number column as playing card.

screenshot of the sample

View requirements

  • The format expect the following fields:
Field Type
Title Single line of text.
Name Choice - Default values (♠️,♥,♣,♦)
Number Number - Limit values between Min. 1 and Max. 10.
Color Single line of text - Color name or hex number.

Sample

Solution Author(s)
generic-numeric-card-format.json André Lage

Version history

Version Date Comments
1.0 April 22, 2022 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 Doc Lib

Creates a card-style tile view in a SharePoint Document Library with file previews, badges, titles, and a footer with actions.

Explore format

Book Template Card Formatter

This SharePoint JSON view formatting sample transforms your list items into visually rich book cards.

Explore format

Employee Recognition Card

This sample acts as a digital shout-out board for your team, built right into SharePoint. It gives employees an easy way to recognize and appreciate each other's hard work. Colleagues can show their support by clicking on emojis to cast their votes.

Explore format