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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
{
  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