Card Group Layout

On This Page

Function

a!cardGroupLayout( label, labelPosition, helpTooltip, cards, spacing, cardWidth, fillContainer, cardHeight, showWhen, marginAbove, marginBelow )

Displays an arrangement of cards, with the same width and height.

The Card Group Layout component allows you to easily create consistent and responsive sets of cards, regardless of the card content, making your overall UI look more balanced and dynamic.

Parameters

Name	Keyword	Types	Description
Label	label	Text	Text to display as the field label.
Label Position	labelPosition	Text	Determines where the label appears. Valid values: `"ABOVE"`, `"ADJACENT"`, `"COLLAPSED"` (default), `"JUSTIFIED"`.
Help Tooltip	helpTooltip	Text	Displays a help icon with the specified text as a tooltip. The help icon does not show when the label position is `"COLLAPSED"`.
Cards	cards	Any Type	Cards to display using `a!cardLayout()`.
Card Spacing	spacing	Text	Determines the space between the cards. Valid values: `"STANDARD"` (default), `"NONE"`, `"DENSE"`, and `"SPARSE"`.
Card Width	cardWidth	Text	Determines the width of the cards in the layout. Valid values are: `"EXTRA_NARROW"`, `"NARROW"`, `"NARROW_PLUS"`, `"MEDIUM"` (default), `"MEDIUM_PLUS"`, `"WIDE"`, `"WIDE_PLUS"`, `"EXTRA_WIDE"`.
Fill Container	fillContainer	Boolean	When set to `false`, cards have a fixed width. When set to `true`, the width of the cards will expand to allow the card group to fill the container. Cards cannot shrink beyond the fixed width. Default: `true`. Cards in a card group always have matching widths.
Card Height	cardHeight	Text	Determines the height of the cards in the layout. Valid values: `"EXTRA_SHORT"`, `"SHORT"`, `"SHORT_PLUS"`, `"MEDIUM"`, `"MEDIUM_PLUS"`, `"TALL"`, `"TALL_PLUS"`, `"EXTRA_TALL"`, `"AUTO"`(default).
Show When	showWhen	Text	Determines whether the layout is displayed on the interface. When set to `false`, the layout is hidden and is not evaluated. Default: `true`.
Margin Above	marginAbove	Text	Determines how much space is added above the layout. Valid values: `"NONE"` (default), `"EVEN_LESS"`, `"LESS"`, `"STANDARD"`, `"MORE"`, `"EVEN_MORE"`.
Margin Below	marginBelow	Text	Determines how much space is added below the layout. Valid values: `"NONE"`, `"EVEN_LESS"`, `"LESS"`, `"STANDARD"`, `"MORE"` (default), `"EVEN_MORE"`.

Usage considerations

Card group layout ordering in LTR and RTL languages

The Card group layout component has the ability to maintain alignment for groups with variable number of cards, following a logical reading order that goes from left to right or right to left depending on your language and locale settings. For example, a group of cards numbered 1-6 and split into two rows might look like the following:
- In LTR locales, cards 1, 2, and 3 would be in the first row, in that order (read left to right), with the second row consisting of cards 4, 5, and 6 in that order.
- In RTL locales, cards 3, 2, and 1 would be in the first row, in that order (read left to right), with the second row consisting of cards 6, 5, and 4 in that order.

Async loading placeholder

If this component relies on an async variable, a placeholder will be displayed until the async data is finished loading. See a!asyncVariable() for more information on how the placeholder behavior works.

Examples

Use the interactive editor below to test out your code.

Card group layout with only icons and text

a!localVariables(
  local!awards: {
    a!map(
      id: 1,
      name: "Innovation Excellence",
      description: "This award recognizes employees who have demonstrated exceptional creativity and innovative thinking. It is awarded to those who have introduced new ideas, processes, or products to our company.",
      icon: "lightbulb",
      color: "#FFA41A"
    ),
    a!map(
      id: 2,
      name: "Outstanding Leadership",
      description: "This award honors those who inspire and motivate their teams, drive strategic vision, and demonstrate a commitment to the success of their colleagues.",
      icon: "mountain",
      color: "#1ADFFF"
    ),
    a!map(
      id: 3,
      name: "Customer Service Champion",
      description: "This award acknowledges employees who consistently deliver outstanding customer service. It celebrates those who go above and beyond to ensure customer satisfaction, resolve issues efficiently, and maintain positive relationships with clients.",
      icon: "award",
      color: "#BC6FFF"
    ),
    a!map(
      id: 4,
      name: "Team Collaboration",
      description: "This award honors a team that has shown exceptional collaboration and teamwork. It recognizes the group's ability to achieve outstanding results through effective communication and cooperation.",
      icon: "users",
      color: "#20C85A"
    ),

  },
  {
    a!columnsLayout(
      marginAbove: "STANDARD",
      marginBelow: "LESS",
      spacing: "SPARSE",
      columns: {
        a!columnLayout(
          width: "EXTRA_NARROW",
          contents: {
            a!richTextDisplayField(
              align: "CENTER",
              labelPosition: "COLLAPSED",
              value: a!richTextIcon(
                icon: "trophy",
                color: "#FFBF00",
                size: "EXTRA_LARGE"
              ),

            )
          }
        ),
        a!columnLayout(
          width: "WIDE",
          contents: {
            a!headingField(
              text: "2024 Department Awards",
              marginBelow: "LESS",
              marginAbove: "LESS"
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextItem(
                  text: "Nominees were carefully selected based on their exceptional contributions, outstanding performance, and dedication to our company's values and goals. Winners were chosen through a rigorous evaluation process to honor those who truly exemplify excellence in their roles."
                )
              }
            )
          }
        )
      }
    ),
    a!cardGroupLayout(
      marginBelow: "STANDARD",
      marginAbove: "MORE",
      cardWidth: "NARROW_PLUS",
      fillContainer: true,
      cards: a!forEach(
        items: local!awards,
        expression: a!cardLayout(
          marginBelow: "NONE",
          shape: "SEMI_ROUNDED",
          padding: "STANDARD",
          showBorder: true,
          showShadow: false,
          contents: {
            a!sideBySideLayout(
              spacing: "SPARSE",
              alignVertical: "TOP",
              items: {
                a!sideBySideItem(
                  width: "MINIMIZE",
                  item: a!richTextDisplayField(
                    align: "CENTER",
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextIcon(
                        icon: fv!item.icon,
                        size: "MEDIUM_PLUS",
                        color: fv!item.color
                      )
                    }
                  )
                ),
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextItem(
                        text: fv!item.name,
                        size: "MEDIUM",
                      ),
                      char(10),
                      a!richTextItem(
                        text: fv!item.description,
                        size: "STANDARD",
                        color: "SECONDARY"
                      ),

                    }
                  )
                )
              }
            )
          }
        )
      ),
      cardHeight: "AUTO",
    ),
  }
)

Card group layout with images, icons, and text

The screenshot below shows how the example is displayed at full width.

screenshot of the example below using card group layout

Example expression

a!localVariables(
  local!listings: {
    a!map(
      label: "Apartment in Washington",
      rating: 4.68,
      numberOfReviews: 223,
      beds: "1 queen bed",
      price: 120,
      image: "https://images.unsplash.com/photo-1512918728675-ed5a9ecdebfd?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    ),
    a!map(
      label: "Guesthouse in Washington",
      rating: 4.91,
      numberOfReviews: 85,
      beds: "2 beds",
      price: 162,
      image: "https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    ),
    a!map(
      label: "Apartment in Washington",
      rating: 5.0,
      numberOfReviews: 44,
      beds: "2 queen beds",
      price: 205,
      image: "https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    ),
    a!map(
      label: "Apartment in Dupont Circle",
      rating: 4.88,
      numberOfReviews: 69,
      beds: "1 queen bed",
      price: 165,
      image: "https://plus.unsplash.com/premium_photo-1684175656320-5c3f701c082c?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    ),
    a!map(
      label: "Home in Washington",
      rating: 4.72,
      numberOfReviews: 471,
      beds: "1 double bed",
      price: 99,
      image: "https://images.unsplash.com/photo-1493809842364-78817add7ffb?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    ),
    a!map(
      label: "Guest suite in Washington",
      rating: 5.0,
      numberOfReviews: 4,
      beds: "1 queen bed",
      price: 134,
      image: "https://images.unsplash.com/photo-1529408686214-b48b8532f72c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    ),
    a!map(
      label: "Apartment in Washington",
      rating: 4.82,
      numberOfReviews: 243,
      beds: "2 beds",
      price: 131,
      image: "https://images.unsplash.com/photo-1560448204-603b3fc33ddc?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    ),
    a!map(
      label: "Guest suite in Washington",
      rating: 4.9,
      numberOfReviews: 292,
      beds: "2 beds",
      price: 121,
      image: "https://images.unsplash.com/photo-1484154218962-a197022b5858?q=80&w=1174&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    ),
    a!map(
      label: "Condo in Washington",
      rating: 4.86,
      numberOfReviews: 51,
      beds: "1 queen bed",
      price: 166,
      image: "https://images.unsplash.com/photo-1536376072261-38c75010e6c9?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    )
  },
  local!selected: 1,
  a!paneLayout(
    panes: {
      a!pane(
        contents: {
          a!cardGroupLayout(
            cards: a!forEach(
              items: local!listings,
              expression: a!cardLayout(
                contents: {
                  a!imageField(
                    labelPosition: "COLLAPSED",
                    images: {
                      a!webImage(
                        source: fv!item.image
                      )
                    },
                    size: "FIT",
                    align: "CENTER"
                  ),
                  a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextItem(
                        text: fv!item.label,
                        style: "STRONG"
                      )
                    },
                    marginBelow: "EVEN_LESS"
                  ),
                  a!sideBySideLayout(
                    items: {
                      a!sideBySideItem(
                        item: a!richTextDisplayField(
                          labelPosition: "COLLAPSED",
                          value: {
                            a!richTextItem(
                              text: fv!item.beds,
                              color: "SECONDARY"
                            )
                          },
                          marginAbove: "NONE"
                        ),
                        width: "AUTO"
                      ),
                      a!sideBySideItem(
                        item: a!richTextDisplayField(
                          labelPosition: "COLLAPSED",
                          value: {
                            a!richTextIcon(
                              icon: "star"
                              /*size: "SMALL"*/
                            ),
                            " ",
                            a!richTextItem(
                              text: fv!item.rating
                              /*size: "SMALL"*/
                            ),
                            " (",
                            a!richTextItem(
                              text: fv!item.numberOfReviews
                              /*size: "SMALL"*/
                            ),
                            ")"
                          },
                          marginAbove: "NONE"
                        ),
                        width: "MINIMIZE"
                      )
                    },
                    alignVertical: "MIDDLE",
                    marginBelow: "LESS"
                  ),
                  a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextItem(
                        text: "$" & fv!item.price,
                        size: "MEDIUM"
                      ),
                      a!richTextItem(
                        text: " per night",
                        color: "SECONDARY",
                        size: "MEDIUM"
                      )
                    },
                    marginBelow: "EVEN_LESS"
                  )
                },
                link: a!dynamicLink(
                  value: fv!index,
                  saveInto: local!selected
                ),
                style: if(
                  local!selected = fv!index,
                  "STANDARD",
                  "NONE"
                ),
                shape: "SEMI_ROUNDED",
                padding: "STANDARD",
                showBorder: false,
                showShadow: if(
                  local!selected = fv!index,
                  true,
                  false
                )
              )
            ),
            cardWidth: "NARROW",
            fillContainer: true,
            cardHeight:"MEDIUM_PLUS"
          )
        },
        width: "AUTO"
      ),
      a!pane(
        contents: {
          a!sectionLayout(
            label: "Modern 2-Bedroom Apartment in the Heart of Washington, D.C.",
            labelSize: "MEDIUM_PLUS",
            labelColor: "STANDARD",
            contents: {
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!imageField(
                        labelPosition: "COLLAPSED",
                        images: {
                          a!webImage(
                            source: "https://images.unsplash.com/photo-1512918728675-ed5a9ecdebfd?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                          )
                        },
                        size: "LARGE"
                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!imageField(
                        labelPosition: "COLLAPSED",
                        images: {
                          a!webImage(
                            source: "https://images.unsplash.com/photo-1502672023488-70e25813eb80?q=80&w=1528&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                          ),
                          a!webImage(
                            source: "https://images.unsplash.com/photo-1560440021-33f9b867899d?q=80&w=1559&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                          ),
                          a!webImage(
                            source: "https://images.unsplash.com/photo-1565538810643-b5bdb714032a?q=80&w=1587&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                          ),
                          a!webImage(
                            source: "https://images.unsplash.com/photo-1702014860610-06a4c3f83381?q=80&w=1471&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                          )
                        },
                        size: "GALLERY",
                        isThumbnail: true
                      )
                    },
                    width: "EXTRA_NARROW"
                  )
                }
              ),
              a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                value: {
                  a!richTextItem(
                    text: "Entire apartment in Washington, District of Columbia",
                    size: "MEDIUM",
                    style: "STRONG"
                  ),
                  char(10),
                  a!richTextItem(
                    text: "4 guests • 1 bedroom • 2 beds • 1 bath"
                  )
                },
                marginAbove: "STANDARD",
                marginBelow: "EVEN_LESS"
              ),
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!imageField(
                        labelPosition: "COLLAPSED",
                        images: {
                          a!webImage(
                            source: "https://images.unsplash.com/photo-1573496358961-3c82861ab8f4?q=80&w=1588&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                          )
                        },
                        size: "SMALL",
                        style: "AVATAR"
                      )
                    },
                    width: "EXTRA_NARROW"
                  ),
                  a!columnLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            text: "Hosted by Jessica",
                            size: "MEDIUM"
                          ),
                          char(10),
                          a!richTextItem(
                            text: "7 months hosting",
                            color: "SECONDARY"
                          )
                        }
                      )
                    }
                  )
                },
                alignVertical: "MIDDLE",
                marginAbove: "MORE"
              ),
              a!horizontalLine(
                marginAbove: "STANDARD",
                marginBelow: "MORE"
              ),
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextIcon(
                            icon: "laptop-house",
                            size: "LARGE"
                          )
                        },
                        align: "CENTER"
                      )
                    },
                    width: "EXTRA_NARROW"
                  ),
                  a!columnLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            text: {
                              "Great for Remote Work"
                            },
                            size: "MEDIUM"
                          ),
                          char(10),
                          a!richTextItem(
                            text: {
                              "High-speed Wi-Fi, plus a dedicated workspace"
                            },
                            color: "SECONDARY"
                          )
                        }
                      )
                    }
                  )
                },
                marginBelow: "MORE"
              ),
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextIcon(
                            icon: "subway",
                            size: "LARGE"
                          )
                        },
                        align: "CENTER"
                      )
                    },
                    width: "EXTRA_NARROW"
                  ),
                  a!columnLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            text: {
                              "Metro Accessible"
                            },
                            size: "MEDIUM"
                          ),
                          char(10),
                          a!richTextItem(
                            text: {
                              "The nearest Metro station is just a short walk away"
                            },
                            color: "SECONDARY"
                          )
                        }
                      )
                    }
                  )
                },
                marginBelow: "MORE"
              ),
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextIcon(
                            icon: "cutlery",
                            size: "LARGE"
                          )
                        },
                        align: "CENTER"
                      )
                    },
                    width: "EXTRA_NARROW"
                  ),
                  a!columnLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            text: {
                              "Fully-Equipped Kitchen"
                            },
                            size: "MEDIUM"
                          ),
                          char(10),
                          a!richTextItem(
                            text: {
                              "Complete with updated appliances, cookware, and utensils"
                            },
                            color: "SECONDARY"
                          )
                        }
                      )
                    }
                  )
                },
                marginBelow: "MORE"
              ),
              a!horizontalLine(
                marginAbove: "STANDARD",
                marginBelow: "MORE"
              ),
              a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                value: {
                  a!richTextItem(
                    text: "Welcome to your perfect getaway in the vibrant Adams Morgan neighborhood of Washington, D.C.! This charming 1-bedroom, 1-bathroom apartment is ideal for up to 4 guests, offering comfort and convenience in one of the city's most lively areas.

Whether you're visiting for business or pleasure, this delightful apartment offers a comfortable and stylish base for your stay in Washington, D.C. Book now and experience the best of city living in the heart of Adams Morgan!"
                  ),
                  char(10),
                  char(10),
                  a!richTextItem(
                    text: "Show more",
                    link: a!dynamicLink(),
                    linkStyle: "STANDALONE"
                  )
                }
              )
            }
          )
        },
        width: "MEDIUM_PLUS",
        padding: "MORE"
      )
    }
  )
)

Feature compatibility

The table below lists this component's compatibility with various features in Appian.

Feature	Compatibility	Note
Portals	Compatible
Offline Interfaces	Compatible
Sync-Time Custom Record Fields	Incompatible
Real-Time Custom Record Fields	Incompatible	Custom record fields that evaluate in real time must be configured using one or more Custom Field functions.
Process Reports	Incompatible	Cannot be used to configure a process report.
Process Events	Incompatible	Cannot be used to configure a process event node, such as a start event or timer event.
Process Autoscaling	Incompatible	Cannot be used in autoscaled processes.
Event Consumer Filter Conditions	Compatible	Can be used in filter conditions.
Event Consumer Event Handlers	Compatible	Can be used in event handler expressions.

Feedback

Was this page helpful?