Business Card

The Business Card turns each row of a SharePoint list into a horizontal business-card layout, so a contact list reads like a stack of cards instead of a table. It is built with a standard Microsoft List and a small piece of gallery view formatting JSON. Each card has a colored accent, an initials avatar, the name, the title and company, and one-click email and phone, and the whole list switches to cards without changing the underlying data.

Author

SharePoint Maven

Built with

• Lists

Features

Choice Column, JSON, Single Line of Text Column

Category

Formatting

Want one like this?

Talk to Greg

Overview

• Renders each person as a horizontal business card using the SharePoint Gallery layout
• A colored accent bar and an initials avatar give each card a branded feel
• The name, title, and company sit together, with email and phone beneath
• Email is a one-click mailto link for fast contact
• Applied as gallery view formatting JSON, so the whole list switches to cards without changing the underlying data
• Works on any contact list, and the accent color keys to the department

Common Use Cases

• Team or department contact list
• Vendor or partner contacts
• Sales or account team roster
• Speaker or presenter list
• Committee or board members
• Client directory

Required Columns

Prerequisites

1. Build a list with these columns before you paste the JSON.
2. Populate the list with data.
3. Internal column names (in brackets) must match the JSON exactly.

How to Apply JSON code

1. Create a Gallery view on the list (view dropdown at the top right, Create new view, set the layout to Gallery, then Create).
2. With the new gallery view open, open the view dropdown again and choose Format current view.
3. Switch to Advanced mode, paste the JSON below, and click Save.

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 130,
  "width": 340,
  "hideSelection": true,
  "formatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "row",
      "box-sizing": "border-box",
      "height": "100%",
      "border": "1px solid #d0d7de",
      "border-radius": "10px",
      "background-color": "#ffffff",
      "overflow": "hidden",
      "box-shadow": "0 2px 7px rgba(0,0,0,0.055)"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "8px",
          "flex-shrink": "0",
          "background-color": "=if([$Department] == 'Engineering', '#0078d4', if([$Department] == 'Marketing', '#8764b8', if([$Department] == 'Operations', '#107c10', if([$Department] == 'Finance', '#ca5010', if([$Department] == 'Sales', '#e3008c', '#605e5c')))))"
        }
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "align-items": "center",
          "padding": "14px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "width": "52px",
              "height": "52px",
              "border-radius": "50%",
              "display": "flex",
              "align-items": "center",
              "justify-content": "center",
              "color": "#ffffff",
              "font-size": "18px",
              "font-weight": "700",
              "flex-shrink": "0",
              "margin-right": "14px",
              "background-color": "=if([$Department] == 'Engineering', '#0078d4', if([$Department] == 'Marketing', '#8764b8', if([$Department] == 'Operations', '#107c10', if([$Department] == 'Finance', '#ca5010', if([$Department] == 'Sales', '#e3008c', '#605e5c')))))"
            },
            "txtContent": "=substring([$Title], 0, 1) + substring([$Title], indexOf([$Title], ' ') + 1, indexOf([$Title], ' ') + 2)"
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "flex-direction": "column",
              "justify-content": "center",
              "min-width": "0"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "font-size": "16px",
                  "font-weight": "700",
                  "color": "#111827",
                  "margin-bottom": "3px",
                  "white-space": "nowrap",
                  "overflow": "hidden",
                  "text-overflow": "ellipsis"
                },
                "txtContent": "[$Title]"
              },
              {
                "elmType": "div",
                "style": {
                  "font-size": "13px",
                  "font-weight": "600",
                  "color": "#111827",
                  "line-height": "18px",
                  "margin-bottom": "7px",
                  "white-space": "nowrap",
                  "overflow": "hidden",
                  "text-overflow": "ellipsis"
                },
                "txtContent": "=[$JobTitle] + ' - ' + [$Company]"
              },
              {
                "elmType": "a",
                "attributes": {
                  "href": "='mailto:' + [$Email]"
                },
                "style": {
                  "font-size": "12px",
                  "color": "#005a9e",
                  "text-decoration": "none",
                  "margin-bottom": "3px",
                  "white-space": "nowrap",
                  "overflow": "hidden",
                  "text-overflow": "ellipsis"
                },
                "txtContent": "[$Email]"
              },
              {
                "elmType": "div",
                "style": {
                  "font-size": "12px",
                  "color": "#111827",
                  "font-weight": "500"
                },
                "txtContent": "[$Phone]"
              }
            ]
          }
        ]
      }
    ]
  }
}

Common Questions About the Business Card