SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Interactive Content Card with Button

This sample uses SharePoint List Formatting to display list items as modern card tiles with image header, icon overlay, and call-to-action button.

Get this format View on GitHub

Shared by Sai Bandaru
Updated Sep 16, 2025

Interactive Content Card with Image Header and Explore Button
Sample preview · View original image

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/tile-formatting.schema.json",
  "height": 400,
  "width": 365,
  "hideSelection": true,
  "formatter": {
    "elmType": "div",
    "style": {
      "border-radius": "8px",
      "overflow": "hidden",
      "font-family": "Segoe UI, Arial, sans-serif",
      "display": "flex",
      "flex-direction": "column",
      "margin-right": "20px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "position": "relative"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "[$Image.displayValue]"
            },
            "style": {
              "width": "100%",
              "height": "220px",
              "object-fit": "cover"
            }
          },
          {
            "elmType": "div",
            "style": {
              "position": "absolute",
              "top": "16px",
              "left": "16px",
              "background-color": "#ffffff",
              "border-radius": "25%",
              "width": "30px",
              "height": "30px",
              "display": "flex",
              "align-items": "center",
              "justify-content": "center"
            },
            "children": [
              {
                "elmType": "img",
                "attributes": {
                  "src": "[$IconUrl.displayValue]"
                },
                "style": {
                  "width": "24px",
                  "height": "24px"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "padding": "16px 24px 24px 24px",
          "background-color": "#ffffff",
          "display": "flex",
          "flex-direction": "column"
        },
        "children": [
          {
            "elmType": "span",
            "style": {
              "font-size": "20px",
              "font-weight": "700",
              "color": "#dc3545",
              "margin": "12px 0 6px 0",
              "text-decoration": "none"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "span",
            "style": {
              "font-size": "14px",
              "color": "#666",
              "margin": "0 0 20px 0",
              "text-decoration": "none"
            },
            "txtContent": "[$Description]"
          },
          {
            "elmType": "a",
            "attributes": {
              "href": "[$Url]",
              "target": "_blank"
            },
            "style": {
              "padding": "12px 24px",
              "border": "1px solid #dc3545",
              "border-radius": "4px",
              "text-decoration": "none",
              "font-weight": "600",
              "font-size": "14px",
              "display": "inline-block",
              "background-color": "transparent",
              "color": "#000"
            },
            "txtContent": "Explore Section"
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitioninteractive-content-card.json

From the contributor

How to use this sample

Summary

This sample uses SharePoint List Formatting to display list items as modern card tiles with a prominent image header, icon overlay, and call-to-action button.
Each card features a fixed 365x400px layout with an image background, branded icon badge, title/description content area, and an "Explore Section" button that opens external links.

screenshot of the sample

View Requirements

Create a list with the following columns:

Internal Name Type Description
Title Single line of text Card title/heading
Description Multiple lines of text Card description/summary
Image Single of text Main card background image (upload image siteassets)
IconUrl Single line of text Small icon for the overlay badge (upload image/url siteassets)
Url Hyperlink Target URL for the "Explore Section" button

How it Works

  • Image Header: The main image (Image column) serves as a 220px tall background header
  • Icon Overlay: A circular white badge in the top-left displays the icon from IconUrl
  • Content Area: White content section displays the Title in red (#dc3545) and Description in gray
  • Action Button: "Explore Section" button links to the URL specified in the Url column
  • Fixed Dimensions: Each card maintains consistent 365x400px sizing with 20px right margin
  • External Links: All URLs open in new tabs/windows for better user experience

Design Features

  • Modern Card Design: Clean, professional appearance with rounded corners
  • Responsive Layout: Fixed-width cards that work well in grid arrangements
  • Brand Colors: Red accent color (#dc3545) for titles and button borders
  • Accessibility: Proper contrast ratios and semantic HTML structure
  • Interactive Elements: Hover-friendly button styling

Sample

Solution Author(s)
interactive-content-card.json Sai Bandaru

Version history

Version Date Comments
1.0 September 16, 2025 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.

Additional Notes

  • Image Requirements: Use high-quality images (minimum 365px wide) for best results
  • Icon Format: PNG or SVG icons work best for the overlay badge (24x24px display size)
  • URL Validation: Ensure all URLs are properly formatted and accessible
  • Performance: Consider image optimization for faster loading times
  • Customization: Modify colors, spacing, and button text in the JSON as needed
  • Mobile Friendly: Fixed-width design works well on desktop and tablet devices

Customization Options

You can easily customize this formatter by modifying:

  • Colors: Change the red accent color (#dc3545) to match your brand
  • Button Text: Update "Explore Section" to your preferred call-to-action
  • Dimensions: Adjust card width/height and image header size
  • Border Radius: Modify the 8px border-radius for different corner styles
  • Spacing: Adjust padding and margins for tighter or looser layouts

Keep exploring

More formats like this

Course Training Tile Cards

Modern tile card layout for displaying training courses with images, badges, and hover previews in SharePoint Gallery view.

Explore format

Picture Link Tiles - Collapsible

Creates a card-style tile view in a SharePoint list with expand and collapse functionality.

Explore format

Icon Link Tiles

This sample uses tileProps element to create tile layout on the view. This layout allow users to see the list as the promoted links app (including the power the security trimming on the items). This sample uses the Icons from the Microsoft UI Fabric. The name of the icon is referenced through an Icon field.

Explore format