Button Style Card Layout

Card layouts do not support adjusting the border color.

Stefan Helzle 

How can I create the button design I want without using card layout?

I do not fully understand your question. Is a buttonWidget not an option for you?

spykid said:

How can I create the button design I want without using card layout?

a!buttonWidget()

This is the standard button. It's usable in ALL but a VERY FEW use cases.  What exactly is your situation?

 Mike Schmitt 

Each screen is created with a separate Process Model.
I want to return to the list screen after clicking the back button.
The list screen is not displayed when calling from site object.
create back button with card layout and set it to a!startprocesslink, a list screen will be displayed when call it from site object.

Gotcha.  Start Process Link is one of the things that requires the "card as button" pattern override to be used.  Unfortunately that means you will need to work within the constraints of the Card Layout component.  I would suggest that you can set its background color, that might simply need to be enough.  Watch in future iterations of appian as they are likely to add new tweaks and/or enhance current capabilities, but I wouldn't let your current design depend on possible future additions that may or may not happen.

Do you happen to have a good example of the "card as a button" pattern? I've looked but nothing seems to resemble the a!buttonWidget and I need to have a!startProcessLink and a regular button side by side

Below is an example. you can re-work according to your requirement.

{
  a!localVariables(
    local!options: {
      a!map(name: "House"),
      a!map(name: "Condo")
    },
    local!selectedCard,
    {
      a!columnsLayout(
        columns: {
          a!forEach(
            items: local!options,
            expression: a!columnLayout(
              width: "2X",
              contents: {
                a!cardLayout(
                  padding: "",
                  borderColor: "ACCENT",
                  contents: {
                    a!richTextDisplayField(
                      labelPosition: "COLLAPSED",
                      value: {
                        a!richTextItem(
                          text: fv!item.name,
                          color: "ACCENT",
                          size: "MEDIUM",
                          style: ""
                        ),
                        char(32)
                      },
                      align: "CENTER"
                    )
                  },
                  link: a!startProcessLink(),
                  height: "",
                  shape: ""
                )
              }
            )
          ),
          a!columnLayout(
            width: "10X",
            contents: {
              a!buttonArrayLayout(
                align: "START",
                buttons: a!buttonWidget(label: "House")
              )
            }
          ),
          a!columnLayout()
        }
      )
    }
  )
}

Below is an example. you can re-work according to your requirement.

{
  a!localVariables(
    local!options: {
      a!map(name: "House"),
      a!map(name: "Condo")
    },
    local!selectedCard,
    {
      a!columnsLayout(
        columns: {
          a!forEach(
            items: local!options,
            expression: a!columnLayout(
              width: "2X",
              contents: {
                a!cardLayout(
                  padding: "",
                  borderColor: "ACCENT",
                  contents: {
                    a!richTextDisplayField(
                      labelPosition: "COLLAPSED",
                      value: {
                        a!richTextItem(
                          text: fv!item.name,
                          color: "ACCENT",
                          size: "MEDIUM",
                          style: ""
                        ),
                        char(32)
                      },
                      align: "CENTER"
                    )
                  },
                  link: a!startProcessLink(),
                  height: "",
                  shape: ""
                )
              }
            )
          ),
          a!columnLayout(
            width: "10X",
            contents: {
              a!buttonArrayLayout(
                align: "START",
                buttons: a!buttonWidget(label: "House")
              )
            }
          ),
          a!columnLayout()
        }
      )
    }
  )
}