Numbered List Card

The Numbered List Card turns each row of a SharePoint list into a compact card led by a bold sequence number, so an ordered list - onboarding steps, a top ten, a ranked playbook - reads in order at a glance instead of as flat rows. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to the title column. Each card pairs a colored number badge with the item's title and a short description, and anything left unranked falls back to a neutral badge so the view never looks broken.

Author

SharePoint Maven

Built with

• Lists

Features

JSON, Number Column, Single Line of Text Column

Category

Formatting

Want one like this?

Talk to Greg

Overview

• Renders each list row as a clean card led by a bold, colored sequence number
• Turns an ordered or ranked list into something you can read in sequence at a glance
• Pairs the number badge with the item’s title and a short one-line description
• Uses a plain Number column for the order, so you set the sequence without dragging rows around
• Applied as column-formatting JSON on the title column, so it changes how the row looks but never the underlying data
• Any item left without a rank falls back to a neutral gray badge instead of breaking the layout

Common Use Cases

• New-hire onboarding steps
• A top-ten or ranked priority list
• A step-by-step process or playbook
• Ranked FAQs or a knowledge base
• An event agenda in session order
• A leaderboard or set of standings

Details

• Design Pattern: Cards & Tiles
• Format Scope: Column

Required Columns

Prerequisites

1. Build a list with these columns before you paste the JSON.
2. Then populate the list, giving each item a number in the Rank column.
3. Internal column names (in brackets) must match the JSON exactly.

How to Apply JSON code

1. Select the Task column header, then Column settings, then Format this column.
2. Switch to Advanced mode.
3. Paste the JSON below and click Save.
4. Widen the Task column and hide the others so each card has room.

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-direction": "row",
    "align-items": "center",
    "gap": "14px",
    "padding": "12px 16px",
    "margin": "6px 0",
    "background-color": "#ffffff",
    "border": "1px solid #e5e7eb",
    "border-left": "=if([$Rank] == '', '4px solid #9aa0a6', '4px solid #0f6cbd')",
    "border-radius": "10px",
    "box-shadow": "0 1px 2px rgba(0,0,0,0.08)",
    "box-sizing": "border-box"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "flex-shrink": "0",
        "width": "42px",
        "height": "42px",
        "border-radius": "50%",
        "display": "flex",
        "align-items": "center",
        "justify-content": "center",
        "background-color": "=if([$Rank] == '', '#e1e3e6', '#0f6cbd')",
        "color": "=if([$Rank] == '', '#605e5c', '#ffffff')",
        "font-size": "18px",
        "font-weight": "700"
      },
      "txtContent": "=if([$Rank] == '', '-', [$Rank])"
    },
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "column",
        "gap": "4px",
        "min-width": "0"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "font-size": "15px",
            "font-weight": "600",
            "color": "#201f1e",
            "white-space": "nowrap",
            "overflow": "hidden",
            "text-overflow": "ellipsis"
          },
          "txtContent": "@currentField"
        },
        {
          "elmType": "div",
          "style": {
            "font-size": "13px",
            "color": "#4f4b47",
            "white-space": "nowrap",
            "overflow": "hidden",
            "text-overflow": "ellipsis"
          },
          "txtContent": "[$Description]"
        }
      ]
    }
  ]
}

Common Questions About the Numbered List Card