Cards as Buttons

Cards can be used as an alternative to choice inputs like radio buttons. Cards make it easier to show clear explanations for each choice, aided by icons and styled text.

Cards can also be used as an alternative to links for navigation, providing larger click targets for mouse users that require less effort to select.

Example Expression

{
  a!richTextDisplayField(
    labelPosition: "COLLAPSED",
    value: {
      char(10),
      char(10),
      a!richTextItem(
        text: "Is your home a house or a condo?",
        color: "ACCENT",
        size: "LARGE"
      ),
      char(10),
      char(10),
      char(10)
    },
    align: "CENTER"
  ),
  a!columnsLayout(
    columns: {
      a!columnLayout(),
      a!columnLayout(
        contents: {
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!cardLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          char(10),
                          char(10),
                          a!richTextIcon(
                            icon: "home",
                            color: "#8CA1D0",
                            size: "LARGE"
                          ),
                          char(10),
                          char(10),
                          a!richTextItem(
                            text: "House",
                            style: "STRONG",
                            color: "ACCENT",
                            size: "LARGE"
                          ),
                          char(10),
                          char(10),
                          a!richTextItem(
                            text: "A single family home, townhouse, or duplex",
                            size: "SMALL"
                          )
                        },
                        align: "CENTER"
                      )
                    },
                    height: "MEDIUM",
                    link: a!submitLink()
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!cardLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          char(10),
                          char(10),
                          a!richTextIcon(
                            icon: "building",
                            color: "#8CA1D0",
                            size: "LARGE"
                          ),
                          char(10),
                          char(10),
                          a!richTextItem(
                            text: "Condo",
                            style: "STRONG",
                            color: "ACCENT",
                            size: "LARGE"
                          ),
                          char(10),
                          char(10),
                          a!richTextItem(
                            text: "A multi-family building in which you own a unit",
                            size: "SMALL"
                          )
                        },
                        align: "CENTER"
                      )
                    },
                    height: "MEDIUM",
                    link: a!submitLink()
                  )
                }
              )
            }
          )
        },
        width: "WIDE"
      ),
      a!columnLayout()
    }
  ),
  a!richTextDisplayField(
    labelPosition: "COLLAPSED",
    value: {
      char(10),
      char(10),
      a!richTextIcon(
        icon: "arrow-left",
        color: "ACCENT",
        link: a!submitLink(),
        linkStyle: "STANDALONE"
      ),
      a!richTextItem(
        text: " Go back",
        link: a!submitLink(),
        linkStyle: "STANDALONE"
      )
    },
    align: "CENTER"
  )
}
FEEDBACK