Free cookie consent management tool by TermsFeed

Card Group Layout Component

Function
Copy link to clipboard

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.

See also: Card Layout

Parameters
Copy link to clipboard

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).

Visibility

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
Copy link to clipboard

Card group layout ordering in LTR and RTL languages
Copy link to clipboard

  • 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.

      screenshot showing card group layout configuration in LTR locales

    • 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.

      screenshot showing card group layout configuration in RTL locales

Examples
Copy link to clipboard

Use the interactive editor below to test out your code.

Card group layout with only icons and text
Copy link to clipboard

Card group layout with images, icons, and text
Copy link to clipboard

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

screenshot of the example below using card group layout

Example expression

Feature compatibility
Copy link to clipboard

The table below lists this component's compatibility with various features in Appian.
Feature Compatibility Note
Portals Compatible
Offline Mobile 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 Compatible

Feedback
Copy link to clipboard