Change view security from record and place it inside the individual interface .

Could not display interface. Please check definition and inputs. 

if(
  local!booleanValue: true,

a!localVariables(
  
  local!number: 12,
  local!text: "practice",
  a!formLayout(
    label: "Form Practice",
    contents: {
      a!boxLayout(label: "Test Box", style: "SUCCESS")
    },
    buttons: a!buttonLayout(
      primaryButtons: {
        a!buttonWidget(
          label: "Submit",
          submit: true,
          style: "SOLID",
          loadingIndicator: true
        )
      },
      secondaryButtons: {
        a!buttonWidget(
          label: "Cancel",
          value: true,
          saveInto: {},
          submit: true,
          style: "OUTLINE",
          validate: false
        )
      }
    )
  )
),
rule!S_errorCard()
)

Do you have another set of local variables defined above the if() condition? Also what is within the rule!S_errorCard()

No , there are  no local variables defined above if() condition . Inside rule!S_errorCard () its simply a  text message .

{
  a!cardLayout(
    contents: {
      a!richTextDisplayField(
        value: a!richTextItem(
          text: "Subtitle Error",
          size: "MEDIUM",
          style: "STRONG"
        ),
        align: "CENTER"
      )
    },
    height: "MEDIUM",
    style: "INFO",
    marginBelow: "STANDARD"
  )
}

your if() condition is relied on a local variable which is not defined above. You can use a rule input or define the local variable above the if()

a!localVariables(
  local!booleanValue: true,
  local!number: 12,
  local!text: "practice",
  if(
    local!booleanValue,
    a!formLayout(
      label: "Form Practice",
      contents: {
        a!boxLayout(label: "Test Box", style: "SUCCESS")
      },
      buttons: a!buttonLayout(
        primaryButtons: {
          a!buttonWidget(
            label: "Submit",
            submit: true,
            style: "SOLID",
            loadingIndicator: true
          )
        },
        secondaryButtons: {
          a!buttonWidget(
            label: "Cancel",
            value: true,
            saveInto: {},
            submit: true,
            style: "OUTLINE",
            validate: false
          )
        }
      )
    ),
    rule!S_errorCard()
  )
)

Above one is just the example , Except local!booleanValue , there are somany local variables defined in real code which are responsible to query a lot of data . So we dont want to load all the data if the visibility is false . If the visibility is true then we want to load all the local variables which are responsible for the Formlayout .

Sure, you can use the below

a!localVariables(
  local!booleanValue:true,
  if(
    local!booleanValue,
    a!localVariables(),
    rule!S_errorCard()
  )
)

Thanks it worked now . In rule!S_errorCard()  , I wanted to put the text into centre . But in cardlayout its showing on top .

You can use the parameters such as Padding of the card to achieve that and also by adding few char(10) in your richtextdisplayfield if you are using that.