Recently a custom card feature is added to SharePoint List Formatting. By using that feature, SharePoint allows us to add the customized cards to the column, when ever hovering / clicking in List formatting (Column / View).

The below is the schema for custom card in Column / View formatting as follows,

    "customCardProps": {
        "type": "object",
        "description": "Object that defines custom card props on hover/click",
        "properties": {
            "openOnEvent": {
                "description": "Event name to decide on which the customCard should open",
                "type": "string",
                "pattern": "(click|hover)$"
            "directionalHint": {
                "description": "Specify the direction relative to the target in which CustomCard will be positioned",
                "enum": [
            "isBeakVisible": {
                "description": "Specify if the beak is to be shown or not",
                "type": "boolean"
            "formatter": {
                "description": "JSON object that defines formatting for customCards",
                "$ref": "#/definitions/elm"
        "required": [

Based on the schema, I like to show the simple example to display the image when ever we hovering over the Title column.

Output for the above JSON snippet is pictured below,

Custom Card in Column Formatting