JSON Header Formatting SharePoint list - Subheading

[ConnM]

Hi 

I have a SharePoint list form, and I have been asked to add "Something small in the header to say 'For Internal Use Only'"

I am struggling to change the JSON to add a subheading. Can anyone advise?

{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-Green"
    },
    "style": {
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "margin-bottom": "16px",
        "background-color": "#13A10E"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "flex",
                "box-sizing": "border-box",
                "align-items": "center"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "iconName": "Page",
                        "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-#0C0C0C",
                        "title": "Details"
                    },
                    "style": {
                        "flex": "none",
                        "padding": "0px",
                        "padding-left": "0px",
                        "height": "36px"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "attributes": {
                "class": "ms-fontColor-#0C0C0Cy ms-fontWeight-bold ms-fontSize-24"
            },
            "style": {
                "box-sizing": "border-box",
                "width": "100%",
                "text-align": "left",
                "padding": "21px 12px",
                "overflow": "hidden"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "= [$Title] + ' PID '"
                }
            ]
        }
    ]
}

Thanks if anyone can help

Conn

[#2 · Accepted solution]

@ConnM yes you can do this but it can't pick up the list description so you will need to have a column in your list for the subtitle text. But the advantage of that is that the text can then be different for each item.  My column for the subtitle is called Note.

{
    "elmType": "div",
    "attributes": {
        "class": "ms-bgColor-themePrimary ms-fontColor-white"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "margin": "10px",
                "width": "100%",
                "border": "none",
                "padding": "10px",
                "display": "=if([$Title] == '' , 'none' , 'flex')",
                "flex-direction": "column"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "[$Title]",
                    "style": {
                        "text-align": "left"
                    },
                    "attributes": {
                        "class": "ms-fontSize-28 ms-fontWeight-bold"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "[$Note]",
                    "style": {
                        "text-align": "left",
                        "display": "=if([$Note] == '' , 'none' , '')"
                    },
                    "attributes": {
                        "class": "ms-fontSize-16"
                    }
                }
            ]
        }
    ]
}

This is the result:

Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Principal Consultant, SharePoint and Power Platform WSP Global (and classic 1967 Morris Traveller driver)

[#3]

Thanks @Rob_Elliott,

I used your response as a bit of a template. I didn't need the dynamic text, so I hardcoded it in and it seems to be working. I really appreciate it

{
    "elmType": "div",
    "attributes": {
        "class": "ms-bgColor-green ms-fontColor-white ms-borderColor-Green"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "margin": "10px",
                "width": "100%",
                "border": "none",
                "padding": "10px",
                "flex-direction": "column"
            },
            "children": [
                {
                    "elmType": "div",
                    "txtContent": "= [$Title] + ' PID '",
                    "style": {
                        "text-align": "left"
                    },
                    "attributes": {
                        "class": "ms-fontSize-28 ms-fontWeight-bold"
                    }
                },
                {
                    "elmType": "div",
                    "txtContent": "Confidential",
                    "style": {
                        "text-align": "right"
                    },
                    "attributes": {
                        "class": "ms-fontSize-12"
                    }
                }
            ]
        }
    ]
}