Card Group Layout Component Share Share via LinkedIn Reddit Email Copy Link Print On This Page Function 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 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 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. Examples Use the interactive editor below to test out your code. Card group layout with only icons and text Card group layout with images, icons, and text The screenshot below shows how the example is displayed at full width. Example expression Feature compatibility 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 Was this page helpful? SHARE FEEDBACK Loading...
