Header with sub heading

Yup.

Looks good. Did you have a question?

i need to be create that type of UI

it is a grid header

Grids do not support that. But you could use tooltips to add information to a grid column header. If there is no way around this "requirement", you could build a custom grid using nested card layouts.

a!localVariables(
  local!data: a!map(name: 155353, unit1Grade: "Test1", unit1Code: "Test2", unit1SchemeCode: "Test3", unit2Grade: "Test1", unit2Code: "Test2", unit2SchemeCode: "Test3"),

  a!formLayout(
    contents: {
      a!richTextDisplayField(
        labelPosition: "COLLAPSED",
        value: {
          a!richTextItem(
            text: "Candidate Details",
            size: "LARGE"
          )
        }
      ),
      a!columnsLayout(
        showDividers: true,
        columns: {
          a!columnLayout(
            contents: {
              a!richTextDisplayField(
                label: "CondidateName",
                value: {
                  a!richTextItem(
                    text: local!data.name
                  )
                }
              )
            }
          ),
          a!columnLayout(
            contents: {
              a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                align: "CENTER",
                value: {
                  a!richTextItem(
                    text: "Unit1",
                    style: "STRONG"
                  )
                }
              ),
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            text: "centreGrade",
                            style: "STRONG"
                          ),
                          char(13),
                          a!richTextItem(
                            text: local!data.unit1Grade
                          )
                        }
                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            text: "unitCode",
                            style: "STRONG"
                          ),
                          char(13),
                          a!richTextItem(
                            text: local!data.unit1Code
                          )
                        }
                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            text: "schemeCode",
                            style: "STRONG"
                          ),
                          char(13),
                          a!richTextItem(
                            text: local!data.unit1SchemeCode
                          )
                        }
                      )
                    }
                  )
                }
              )
            }
          ),
          a!columnLayout(
            contents: {
              a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                align: "CENTER",
                value: {
                  a!richTextItem(
                    text: "Unit2",
                    style: "STRONG"
                  )
                }
              ),
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            text: "centreGrade",
                            style: "STRONG"
                          ),
                          char(13),
                          a!richTextItem(
                            text: local!data.unit2Grade
                          )
                        }
                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            text: "unitCode",
                            style: "STRONG"
                          ),
                          char(13),
                          a!richTextItem(
                            text: local!data.unit2Code
                          )
                        }
                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            text: "schemeCode",
                            style: "STRONG"
                          ),
                          char(13),
                          a!richTextItem(
                            text: local!data.unit2SchemeCode
                          )
                        }
                      )
                    }
                  )
                }
              )
            }
          )
        }
      )
    }
  )
)

Thanks i diid like that