SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Numbered List Card

This sample converts list items into numbered list cards. The numbering is done using @rowIndex JSON formatting value.

Get this format View on GitHub

Shared by Tanel Vahk
Updated Oct 1, 2024

Numbered List Card formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

2 definitions

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",
    "attributes": {
      "class": "ms-fontSize-m ms-fontWeight-semibold"
    },
    "style": {
      "display": "flex",
      "position": "relative",
      "border-radius": "0 0.5rem 0.5rem 0.5rem",
      "margin": "30px 5px",
      "box-shadow": "0.25rem 0.25rem 0.6rem rgba(0,0,0,0.05), 0 0.5rem 1.125rem rgba(75,0,0,0.05)"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-fontColor-white"
        },
        "style": {
          "position": "absolute",
          "top": "-1rem",
          "left": "-0.75rem",
          "height": "3rem",
          "width": "3rem",
          "border-radius": "1rem 1rem 0 1rem",
          "display": "flex",
          "align-items": "flex-end",
          "justify-content": "flex-end"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "PASTE YOUR IMAGE URL HERE"
            },
            "style": {
              "position": "absolute",
              "top": "0",
              "left": "0",
              "width": "100%",
              "height": "100%",
              "border-radius": "1rem 1rem 0 1rem",
              "z-index": "0"
            }
          },
          {
            "elmType": "span",
            "style": {
              "z-index": "1",
              "color": "white",
              "padding-right": "10px",
              "letter-spacing": "-3px"
            },
            "attributes": {
              "class": "ms-fontSize-xlPlus ms-fontWeight-bold"
            },
            "txtContent": "=@rowIndex + 1"
          }
        ]
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-neutralLighter"
        },
        "style": {
          "display": "flex",
          "flex-direction": "column",
          "align-items": "start",
          "justify-content": "center",
          "min-height": "3rem",
          "padding": "7px 1rem 7px 3rem",
          "width": "100%"
        },
        "children": [
          {
            "elmType": "span",
            "attributes": {
              "class": "ms-fontSize-l"
            },
            "style": {
              "padding-bottom": "5px"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "span",
            "attributes": {
              "class": "ms-fontSize-m ms-fontWeight-regular"
            },
            "txtContent": "[$Description]"
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionnumbered-list-cards-background.json

From the contributor

How to use this sample

Summary

This sample converts list items into numbered list cards. The numbering is done using @rowIndex JSON formatting value. If you prefer custom ordering, create a new column and use it for sorting in the SharePoint view. To ensure the view works properly, ensure all required columns are included.

The sample includes two different JSON files: one where the numbering background uses a SharePoint theme color, and another that uses a custom image for the background.

screenshot of the sample

View requirements

Type Internal Name Required
Single line of text Title
Multiple lines of text Description
  • Make sure to use the List View and include all the specified fields in the view.

Sample

Solution Author(s)
numbered-list-cards.json Tanel Vahk
numbered-list-cards-background.json Tanel Vahk

Version history

Version Date Comments
1.0 October 01, 2024 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.