Info Card (View Formatting)
Overview
- Renders each list item as a clean card in a responsive grid using the SharePoint Gallery layout
- A colored category tag and a status dot let you read type and state at a glance
- The card leads with the item title, then shows key fields such as owner and due date
- Category and status colors are set in the JSON and are easy to map to your own values
- Applied as gallery view formatting JSON, so the whole list switches to cards without changing the underlying data
- Works on almost any list, and the fields and colors are simple to adapt to your content
Common Use Cases
- Initiatives or project portfolio board
- Request or intake tracker
- Asset or equipment register
- Contract or vendor list
- Campaign or content calendar
- Any list that reads better as cards than rows
How to Apply JSON Formatting
1. Create a list with the following columns. The internal name [in brackets] must match the JSON code exactly:
[Title] Single line of text
[Category] Choice
[Status] Choice
[Owner] Single line of text
[DueDate] Date
2. Populate the list with data.
3. Create a Gallery view on the list (view dropdown at the top right, Create new view, set the layout to Gallery, then Create).
4. With the new gallery view open, open the view dropdown again and choose Format current view.
5. Switch to Advanced mode, paste the JSON below, and click Save.
JSON Code – Select, Copy and Paste
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"height": 198,
"width": 300,
"hideSelection": false,
"formatter": {
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"box-sizing": "border-box",
"height": "100%",
"width": "100%",
"padding": "14px",
"border": "1px solid #edebe9",
"border-radius": "12px",
"background-color": "#ffffff",
"box-shadow": "0 2px 6px rgba(0,0,0,0.08)"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"justify-content": "space-between",
"width": "100%"
},
"children": [
{
"elmType": "div",
"style": {
"font-size": "11px",
"font-weight": "700",
"padding": "3px 11px",
"border-radius": "14px",
"background-color": "=if([$Category] == 'Marketing', '#f0ebf8', if([$Category] == 'Engineering', '#e6f1fb', if([$Category] == 'Operations', '#eaf3de', if([$Category] == 'Finance', '#fbeee0', if([$Category] == 'Sales', '#fdeef6', '#f3f2f1')))))",
"color": "=if([$Category] == 'Marketing', '#3b2e58', if([$Category] == 'Engineering', '#0c447c', if([$Category] == 'Operations', '#0b3b09', if([$Category] == 'Finance', '#7a3309', if([$Category] == 'Sales', '#8a1059', '#3b3a39')))))"
},
"txtContent": "[$Category]"
},
{
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"padding": "3px 9px",
"border-radius": "14px",
"background-color": "=if([$Status] == 'Done', '#e5f1e5', if([$Status] == 'In Progress', '#e6f1fb', if([$Status] == 'On Hold', '#fff4ce', if([$Status] == 'Blocked', '#fde7e9', if([$Status] == 'Open', '#f3f2f1', '#f3f2f1')))))"
},
"children": [
{
"elmType": "div",
"style": {
"width": "8px",
"height": "8px",
"border-radius": "50%",
"margin-right": "5px",
"background-color": "=if([$Status] == 'Done', '#0b6a0b', if([$Status] == 'In Progress', '#0b5cab', if([$Status] == 'On Hold', '#8a6d00', if([$Status] == 'Blocked', '#a4262c', if([$Status] == 'Open', '#605e5c', '#605e5c')))))"
}
},
{
"elmType": "span",
"style": {
"font-size": "11px",
"font-weight": "700",
"color": "=if([$Status] == 'Done', '#0b6a0b', if([$Status] == 'In Progress', '#0b5cab', if([$Status] == 'On Hold', '#8a6d00', if([$Status] == 'Blocked', '#a4262c', if([$Status] == 'Open', '#605e5c', '#605e5c')))))"
},
"txtContent": "[$Status]"
}
]
}
]
},
{
"elmType": "div",
"style": {
"font-size": "17px",
"font-weight": "700",
"color": "#242424",
"margin-top": "14px",
"text-align": "center"
},
"txtContent": "[$Title]"
},
{
"elmType": "div",
"style": {
"border-top": "1px solid #f3f2f1",
"margin": "13px 0 10px 0"
}
},
{
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"justify-content": "space-between",
"width": "100%",
"box-sizing": "border-box",
"padding": "7px 9px",
"border-radius": "9px",
"background-color": "#f3f9ff",
"border": "1px solid #deecf9",
"margin-bottom": "7px"
},
"children": [
{
"elmType": "span",
"style": {
"font-size": "11px",
"font-weight": "700",
"color": "#0c447c",
"background-color": "#deecf9",
"padding": "2px 8px",
"border-radius": "10px",
"flex-shrink": "0"
},
"txtContent": "OWNER"
},
{
"elmType": "span",
"style": {
"font-size": "13px",
"font-weight": "700",
"color": "#242424",
"text-align": "right",
"margin-left": "12px",
"overflow": "hidden",
"text-overflow": "ellipsis",
"white-space": "nowrap"
},
"txtContent": "[$Owner]"
}
]
},
{
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center",
"justify-content": "space-between",
"width": "100%",
"box-sizing": "border-box",
"padding": "7px 9px",
"border-radius": "9px",
"background-color": "#fff8e7",
"border": "1px solid #fde7b3"
},
"children": [
{
"elmType": "span",
"style": {
"font-size": "11px",
"font-weight": "700",
"color": "#7a3309",
"background-color": "#fde7b3",
"padding": "2px 8px",
"border-radius": "10px",
"flex-shrink": "0"
},
"txtContent": "DUE"
},
{
"elmType": "span",
"style": {
"font-size": "13px",
"font-weight": "700",
"color": "#242424",
"text-align": "right",
"margin-left": "12px",
"white-space": "nowrap"
},
"txtContent": "=if([$DueDate] == '', '-', toLocaleDateString([$DueDate]))"
}
]
}
]
}
}Common Questions About the Info Card
What is the Info Card built with?
It is built with a standard Microsoft List (SharePoint list) and gallery view formatting expressed in JSON. There is no custom development, no SPFx solution, and no third-party tools. It is the kind of clean, maintainable formatting Greg Zelfond builds for teams that want a card board without ongoing development overhead.
What columns does it need?
It uses five columns in this example: the built-in Title, a Category choice, a Status choice, an Owner, and a Due date. The card refers to each column by its internal name, so the JSON and the columns must line up exactly – here those names are Title, Category, Status, Owner, and DueDate.
Can I show different fields on the card?
Yes. The card is just a small layout in the JSON, so you can swap the owner and due date for whatever your list tracks, add another field row, or change which choice drives the category color. It is designed to be adapted to almost any list.
Does this design use any custom development or third-party tools?
No. It uses only out-of-the-box SharePoint view formatting, which Microsoft supports natively. That keeps it stable and easy to maintain, and nothing breaks when SharePoint is updated. Out-of-the-box is the only way Greg builds, so you can own and extend the design yourself for years.
If LookBook 365 is code-free and out-of-the-box, why does this example include JSON?
Because SharePoint formatting JSON is not custom code – it is a native configuration feature built into lists and libraries. It is declarative: it only describes how existing columns and views look, and cannot run scripts, reach external services, or change your data. Nothing is deployed and nothing breaks when Microsoft updates SharePoint, and you can edit or remove it anytime. That is why LookBook 365 treats it as out-of-the-box and low risk.
Can Greg build a card view like this for our team?
Yes – this is exactly the kind of work Greg Zelfond does. As an independent SharePoint consultant and Microsoft MVP, he designs out-of-the-box list and library formatting like this so your team can read and maintain it without a developer. Reach out through the contact page to talk about your lists.
