Enhancing UI’s With card Layouts

Hi Team.

Today we will be playing with Card Layout and with the Help of Different Components we will try Certain Permutations and Combinations to come up with Good Results.

The end Design Is Going to Look Like This

Let’s Cut the Into and Deep Dive into action 🤓

a!localVariables(
  local!marginValues: {
    "NONE",
    "EVEN_LESS",
    "LESS",
    "STANDARD",
    "MORE",
    "EVEN_MORE"
  },
  local!value: "Playing with Cards (Card layout) to create Overlapping Looks",
  local!BlackColor: "#000000",
  local!whiteColor: "#FFFFFF",
  a!cardLayout(
    contents: {
      a!cardLayout(
        contents: {
          a!richTextDisplayField(
            labelPosition: "COLLAPSED",
            value: {
              a!richTextItem(
                text: { "Enhanced Layout" },
                size: "MEDIUM_PLUS"
              )
            },
            preventWrapping: true,
            align: "CENTER",
            marginAbove: local!marginValues[2],
            marginBelow: local!marginValues[5]
          )
        },
        height: "AUTO",
        style: local!BlackColor,
        marginBelow: local!marginValues[1],
        showBorder: false
      ),
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!cardLayout(
                contents: {},
                height: "EXTRA_SHORT",
                style: local!BlackColor,
                marginBelow: local!marginValues[4],
                showBorder: false
              )
            }
          ),
          a!columnLayout(
            contents: {
              a!cardLayout(
                contents: {
                  a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextItem(text: { " " }, size: "LARGE")
                    },
                    align: "CENTER",
                    marginAbove: local!marginValues[4],
                    marginBelow: local!marginValues[4]
                  ),
                  a!columnsLayout(
                    columns: {
                      a!columnLayout(contents: {}, width: "1X"),
                      a!columnLayout(
                        contents: { a!paragraphField(value: local!value) },
                        width: "6X"
                      ),
                      a!columnLayout(contents: {}, width: "1X")
                    }
                  ),
                  a!columnsLayout(
                    columns: {
                      a!columnLayout(contents: {}, width: "1X"),
                      a!columnLayout(
                        contents: {
                          a!cardLayout(
                            contents: {
                              a!richTextDisplayField(
                                labelPosition: "COLLAPSED",
                                value: {
                                  a!richTextItem(text: { "SUBMIT" }, size: "MEDIUM")
                                },
                                align: "CENTER",
                                marginAbove: local!marginValues[2],
                                marginBelow: local!marginValues[2]
                              )
                            },
                            link: a!dynamicLink(label: "Dynamic Link", saveInto: {}),
                            height: "AUTO",
                            style: local!BlackColor,
                            shape: "SQUARED",
                            padding: "NONE",
                            marginAbove: "NONE",
                            marginBelow: "NONE",
                            showBorder: false,
                            showShadow: true,
                            decorativeBarPosition: "NONE",
                            decorativeBarColor: local!whiteColor
                          )
                        },
                        width: "6X"
                      ),
                      a!columnLayout(contents: {}, width: "1X")
                    }
                  )
                },
                height: "AUTO",
                style: "NONE",
                padding: "NONE",
                marginAbove: "NONE",
                marginBelow: "NONE",
                showBorder: true,
                showShadow: true,
                decorativeBarPosition: "NONE",
                decorativeBarColor: local!BlackColor
              )
            },
            width: "MEDIUM_PLUS"
          ),
          a!columnLayout(
            contents: {
              a!cardLayout(
                contents: {},
                height: "EXTRA_SHORT",
                style: local!BlackColor,
                marginBelow: "STANDARD",
                showBorder: false
              )
            }
          )
        },
        spacing: "NONE"
      )
    }
  )
)