Heading Component

On This Page

Function

a!headingField()( text, size, headingTag, color, fontWeight, Link, showWhen, align, marginAbove, marginBelow ) The headings component is a way to intuitively structure and easily organize your interface with both visual and non-visual indicators to help all users quickly understand your content. Headings are flexible and can be used inside layouts, forms, columns, and overlays, excluding grids.

Displays a heading with configurations for the color, size, and font weight. Also supports heading accessibility tags, which are used by screen readers and produce no visible change.

Parameters

Name	Keyword	Types	Description
Text	text	Text	Text to display in the header
Size	size	Text	Determines the text size. Valid values: `"LARGE_PLUS"`, `"LARGE"`, `"MEDIUM_PLUS"` (default), `"MEDIUM"`, `"SMALL"`, `"EXTRA_SMALL"`.
Accessibility Heading Tag	headingTag	Text	Determines the heading tag associated with the text for use by screen readers; produces no visible change. Valid values: `"H1"`, `"H2"`, `"H3"`, `"H4"`, `"H5"`, `"H6"`. The default is dependent on the chosen label size. For more information on heading tags, see our heading accessibility guidance.
Color	color	Text	Determines the label color. Valid values: Any valid hex color or `"ACCENT"`, `"STANDARD"` (default), and `"SECONDARY"`.
Font Weight	fontWeight	Text	Determines the thickness to apply to the text value. Valid values include `"LIGHT"`, `"REGULAR"` (Default), `"SEMI_BOLD"`, and `"BOLD"`.
Link	Link	Any Type	Link to apply to the text. Create a link with: a!authorizationLink() a!documentDownloadLink() a!dynamicLink() a!newsEntryLink() a!processTaskLink() a!recordLink() a!reportLink() a!startProcessLink() a!submitLink() a!userRecordLink() a!safeLink() If more than one link is provided, only the first will be used.
Visibility	showWhen	Boolean	Determines whether the component is displayed on the interface. When set to false, the component is hidden and is not evaluated. Default: `true`.
Alignment	align	Text	Determines alignment of the text. Valid values: `"START"` (default), `"CENTER"`, `"END"`.
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"`.

Examples

Use the interactive editor below to test out your code in the provided examples.

a!headerContentLayout(
  header: {
    a!cardLayout(
      contents: {},
      style: "#0a578a",
      padding: "EVEN_LESS",
      showBorder: false
    )
  },
  contents: {
    a!columnsLayout(
      columns: {
        a!columnLayout(),
        a!columnLayout(
          contents: {
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!headingField(
                    text: "My Accounts",
                    headingTag: "H1",
                    color: "#0a578a",
                    marginBelow: "NONE"
                  )
                ),
                a!sideBySideItem(
                  item: a!buttonArrayLayout(
                    buttons: {
                      a!buttonWidget(
                        label: "add account",
                        icon: "plus",
                        size: "SMALL",
                        style: "OUTLINE",
                        color: "#0a578a"
                      )
                    },
                    marginBelow: "NONE"
                  ),
                  width: "MINIMIZE"
                )
              },
              alignVertical: "MIDDLE",
              marginBelow: "MORE"
            ),
            a!horizontalLine(
              marginBelow: "MORE"
            ),
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextIcon(
                        icon: "money-wave",
                        color: "#0a578a",
                        size: "MEDIUM_PLUS"
                      )
                    }
                  ),
                  width: "MINIMIZE"
                ),
                a!sideBySideItem(
                  item: a!headingField(
                    text: "Checking",
                    size: "MEDIUM",
                    headingTag: "H2",
                    color: "#0a578a",
                    marginBelow: "NONE"
                  )
                )
              },
              alignVertical: "MIDDLE"
            ),
            a!cardLayout(
              contents: {
                a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!headingField(
                        text: "Main Checking - 8291",
                        size: "EXTRA_SMALL",
                        headingTag: "H3",
                        color: "#222222",
                        style: "STRONG",
                        link: a!dynamicLink(),
                        marginBelow: "NONE"
                      )
                    ),
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            text: "$1,892.03"
                          )
                        }
                      ),
                      width: "MINIMIZE"
                    )
                  },
                  alignVertical: "MIDDLE"
                )
              },
              shape: "SEMI_ROUNDED",
              padding: "STANDARD",
              marginAbove: "LESS",
              marginBelow: "MORE",
              showBorder: false
            ),
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextIcon(
                        icon: "piggy-bank",
                        color: "#0a578a",
                        size: "MEDIUM_PLUS"
                      )
                    }
                  ),
                  width: "MINIMIZE"
                ),
                a!sideBySideItem(
                  item: a!headingField(
                    text: "Savings",
                    size: "MEDIUM",
                    headingTag: "H2",
                    color: "#0a578a",
                    marginBelow: "NONE"
                  )
                )
              },
              alignVertical: "MIDDLE"
            ),
            a!cardLayout(
              contents: {
                a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!headingField(
                        text: "My Savings Account - 2411",
                        size: "EXTRA_SMALL",
                        headingTag: "H3",
                        color: "#222222",
                        style: "STRONG",
                        link: a!dynamicLink(),
                        marginBelow: "NONE"
                      )
                    ),
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            text: "$12,492.54"
                          )
                        }
                      ),
                      width: "MINIMIZE"
                    )
                  },
                  alignVertical: "MIDDLE"
                )
              },
              shape: "SEMI_ROUNDED",
              padding: "STANDARD",
              marginAbove: "LESS",
              marginBelow: "STANDARD",
              showBorder: false
            ),
            a!cardLayout(
              contents: {
                a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!headingField(
                        text: "Shared Savings - 5389",
                        size: "EXTRA_SMALL",
                        headingTag: "H3",
                        color: "#222222",
                        style: "STRONG",
                        link: a!dynamicLink(),
                        marginBelow: "NONE"
                      )
                    ),
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            text: "$2,315.22"
                          )
                        }
                      ),
                      width: "MINIMIZE"
                    )
                  },
                  alignVertical: "MIDDLE"
                )
              },
              shape: "SEMI_ROUNDED",
              padding: "STANDARD",
              marginBelow: "MORE",
              showBorder: false
            ),
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextIcon(
                        icon: "credit-card-solid",
                        color: "#0a578a",
                        size: "MEDIUM_PLUS"
                      )
                    }
                  ),
                  width: "MINIMIZE"
                ),
                a!sideBySideItem(
                  item: a!headingField(
                    text: "Credit Cards",
                    size: "MEDIUM",
                    headingTag: "H2",
                    color: "#0a578a",
                    marginBelow: "NONE"
                  )
                ),
                a!sideBySideItem(
                  item: a!buttonArrayLayout(
                    buttons: {
                      a!buttonWidget(
                        label: "make payment",
                        size: "SMALL",
                        /*icon: "dollar",*/
                        style: "LINK",
                        color: "#0a578a"
                      )
                    },
                    marginBelow: "NONE"
                  ),
                  width: "MINIMIZE"
                )
              },
              alignVertical: "MIDDLE"
            ),
            a!cardLayout(
              contents: {
                a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!headingField(
                        text: "Cash Saver - 9203",
                        size: "EXTRA_SMALL",
                        headingTag: "H3",
                        color: "#222222",
                        style: "STRONG",
                        link: a!dynamicLink(),
                        marginBelow: "NONE"
                      )
                    ),
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            text: "$314.15"
                          )
                        }
                      ),
                      width: "MINIMIZE"
                    )
                  },
                  alignVertical: "MIDDLE"
                )
              },
              shape: "SEMI_ROUNDED",
              padding: "STANDARD",
              marginAbove: "LESS",
              marginBelow: "STANDARD",
              showBorder: false
            ),
            a!cardLayout(
              contents: {
                a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!headingField(
                        text: "Travel Rewards - 3366",
                        size: "EXTRA_SMALL",
                        headingTag: "H3",
                        color: "#222222",
                        style: "STRONG",
                        link: a!dynamicLink(),
                        marginBelow: "NONE"
                      )
                    ),
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            text: "$634.86"
                          )
                        }
                      ),
                      width: "MINIMIZE"
                    )
                  },
                  alignVertical: "MIDDLE"
                )
              },
              shape: "SEMI_ROUNDED",
              padding: "STANDARD",
              showBorder: false
            )
          },
          width: "WIDE"
        ),
        a!columnLayout()
      }
    )
  },
  backgroundColor: "#f3f8fc",
  contentsPadding: "MORE"
)

Full interface with cards and multiple heading components

Screenshot of a full campsite interface with cards and multiple heading components

a!headerContentLayout(
  header: {
    a!billboardLayout(
      backgroundMedia: a!webImage(
        source: "https://images.unsplash.com/photo-1564577160324-112d603f750f?q=80&w=3542&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      ),
      backgroundColor: "#f0f0f0",
      marginBelow: "NONE",
      overlay: a!fullOverlay(
        contents: {
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!headingField(
                    text: "Our Campsites",
                    size: "LARGE_PLUS",
                    headingTag: "H1",
                    marginAbove: "EVEN_MORE",
                    marginBelow: "EVEN_LESS"
                  ),
                  a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextItem(
                        text: "Explore our available campsites. Use the link on each location to book directly."
                      )
                    },
                    marginBelow: "NONE"
                  )
                },
                width: "WIDE"
              ),
              a!columnLayout(
                contents: {
                  a!cardLayout(
                    height: "SHORT_PLUS",
                    style: "TRANSPARENT",
                    marginBelow: "NONE",
                    showBorder: false
                  )
                }
              )
            },
            alignVertical: "MIDDLE",
            marginBelow: "MORE",
            marginAbove: "EVEN_LESS"
          )
        },
        style: "SEMI_DARK",
        padding: "MORE"
      )
    )
  },
  contents: {
    a!headingField(
      text: "North",
      size: "MEDIUM_PLUS",
      headingTag: "H2",
      color: "#0C2602"
    ),
    a!cardGroupLayout(
      marginBelow: "MORE",
      cards: {
        a!cardLayout(
          contents: {
            a!cardLayout(
              contents: {
                a!headingField(
                  text: "Whispering Pines Campground",
                  size: "SMALL",
                  marginBelow: "NONE",
                  link: a!dynamicLink(),
                  color: "#222222",
                  headingTag: "H3"
                )
              },
              height: "EXTRA_SHORT",
              padding: "NONE",
              showBorder: false
            ),
            a!imageField(
              labelPosition: "COLLAPSED",
              images: {
                a!webImage(
                  source: "https://images.unsplash.com/photo-1664211910371-1b0370b7af75?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                )
              }
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "map-pin"
                ),
                " ",
                a!richTextItem(
                  text: "Front Royal, VA",
                  color: "#666666"
                )
              },
              marginBelow: "NONE"
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "campground"
                ),
                " ",
                a!richTextItem(
                  text: "13 campsites available",
                  color: "#666666"
                )
              }
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!forEach(
                  items: {
                    "Potable Water",
                    "Flush Toilets",
                    "Showers",
                    "Electric Hookups"
                  },
                  expression: {
                    a!richTextItem(
                      text: fv!item & if(fv!isLast,""," • "),
                      size: "SMALL"
                    )
                  }
                )
              }
            )
          },
          shape: "SEMI_ROUNDED",
          padding: "STANDARD",
          marginBelow: "NONE",
          borderColor: "#D0DBCD"
        ),
        a!cardLayout(
          contents: {
            a!cardLayout(
              contents: {
                a!headingField(
                  text: "Eagle's Nest State Park",
                  size: "SMALL",
                  marginBelow: "NONE",
                  link: a!dynamicLink(),
                  color: "#222222",
                  headingTag: "H3"
                )
              },
              height: "EXTRA_SHORT",
              padding: "NONE",
              showBorder: false
            ),
            a!imageField(
              labelPosition: "COLLAPSED",
              images: {
                a!webImage(
                  source: "https://images.unsplash.com/photo-1717697677867-2833cd191a0a?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                )
              }
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "map-pin"
                ),
                " ",
                a!richTextItem(
                  text: "Strasburg, VA",
                  color: "#666666"
                )
              },
              marginBelow: "NONE"
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "campground"
                ),
                " ",
                a!richTextItem(
                  text: "28 campsites available",
                  color: "#666666"
                )
              }
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!forEach(
                  items: {
                    "Potable Water",
                    "Vault Toilets"
                  },
                  expression: {
                    a!richTextItem(
                      text: fv!item & if(fv!isLast,""," • "),
                      size: "SMALL"
                    )
                  }
                )
              }
            )
          },
          shape: "SEMI_ROUNDED",
          padding: "STANDARD",
          marginBelow: "NONE",
          borderColor: "#D0DBCD"
        ),
        a!cardLayout(
          contents: {
            a!cardLayout(
              contents: {
                a!headingField(
                  text: "Sunset Valley Campground",
                  size: "SMALL",
                  marginBelow: "NONE",
                  link: a!dynamicLink(),
                  color: "#222222",
                  headingTag: "H3"
                )
              },
              height: "EXTRA_SHORT",
              padding: "NONE",
              showBorder: false
            ),
            a!imageField(
              labelPosition: "COLLAPSED",
              images: {
                a!webImage(
                  source: "https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                )
              }
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "map-pin"
                ),
                " ",
                a!richTextItem(
                  text: "Flint Hill, VA",
                  color: "#666666"
                )
              },
              marginBelow: "NONE"
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "campground"
                ),
                " ",
                a!richTextItem(
                  text: "34 campsites available",
                  color: "#666666"
                )
              }
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!forEach(
                  items: {
                    "Potable Water",
                    "Flush Toilets",
                    "Showers",
                    "Electric Hookups",
                    "Camp Store"
                  },
                  expression: {
                    a!richTextItem(
                      text: fv!item & if(fv!isLast,""," • "),
                      size: "SMALL"
                    )
                  }
                )
              }
            )
          },
          shape: "SEMI_ROUNDED",
          padding: "STANDARD",
          marginBelow: "NONE",
          borderColor: "#D0DBCD"
        ),
        a!cardLayout(
          contents: {
            a!cardLayout(
              contents: {
                a!headingField(
                  text: "Cedar Ridge Campground",
                  size: "SMALL",
                  marginBelow: "NONE",
                  link: a!dynamicLink(),
                  color: "#222222",
                  headingTag: "H3"
                )
              },
              height: "EXTRA_SHORT",
              padding: "NONE",
              showBorder: false
            ),
            a!imageField(
              labelPosition: "COLLAPSED",
              images: {
                a!webImage(
                  source: "https://images.unsplash.com/photo-1517164850305-99a3e65bb47e?q=80&w=2322&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                )
              }
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "map-pin"
                ),
                " ",
                a!richTextItem(
                  text: "Washington, VA",
                  color: "#666666"
                )
              },
              marginBelow: "NONE"
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "campground"
                ),
                " ",
                a!richTextItem(
                  text: "19 campsites available",
                  color: "#666666"
                )
              }
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!forEach(
                  items: {
                    "Potable Water",
                    "Flush Toilets",
                    "Electric Hookups"
                  },
                  expression: {
                    a!richTextItem(
                      text: fv!item & if(fv!isLast,""," • "),
                      size: "SMALL"
                    )
                  }
                )
              }
            )
          },
          shape: "SEMI_ROUNDED",
          padding: "STANDARD",
          marginBelow: "NONE",
          borderColor: "#D0DBCD"
        )
      },
      cardWidth: "NARROW",
      fillContainer: false
    ),
    a!headingField(
      text: "Central",
      size: "MEDIUM_PLUS",
      headingTag: "H2"
    ),
    a!cardGroupLayout(
      marginBelow: "MORE",
      cards: {
        a!cardLayout(
          contents: {
            a!cardLayout(
              contents: {
                a!headingField(
                  text: "Bear Paw Wilderness",
                  size: "SMALL",
                  marginBelow: "NONE",
                  link: a!dynamicLink(),
                  color: "#222222",
                  headingTag: "H3"
                )
              },
              height: "EXTRA_SHORT",
              padding: "NONE",
              showBorder: false
            ),
            a!imageField(
              labelPosition: "COLLAPSED",
              images: {
                a!webImage(
                  source: "https://images.unsplash.com/photo-1519395612667-3b754d7b9086?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                )
              }
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "map-pin"
                ),
                " ",
                a!richTextItem(
                  text: "Jolett, VA",
                  color: "#666666"
                )
              },
              marginBelow: "NONE"
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "campground"
                ),
                " ",
                a!richTextItem(
                  text: "25 campsites available",
                  color: "#666666"
                )
              }
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!forEach(
                  items: {
                    "Potable Water",
                    "Vault Toilets",
                  },
                  expression: {
                    a!richTextItem(
                      text: fv!item & if(fv!isLast,""," • "),
                      size: "SMALL"
                    )
                  }
                )
              }
            )
          },
          shape: "SEMI_ROUNDED",
          padding: "STANDARD",
          marginBelow: "NONE",
          borderColor: "#D0DBCD"
        ),
        a!cardLayout(
          contents: {
            a!cardLayout(
              contents: {
                a!headingField(
                  text: "Timberland Trails",
                  size: "SMALL",
                  marginBelow: "NONE",
                  link: a!dynamicLink(),
                  color: "#222222",
                  headingTag: "H3"
                )
              },
              height: "EXTRA_SHORT",
              padding: "NONE",
              showBorder: false
            ),
            a!imageField(
              labelPosition: "COLLAPSED",
              images: {
                a!webImage(
                  source: "https://images.unsplash.com/photo-1697114272853-780c434bc378?q=80&w=3542&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                )
              }
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "map-pin"
                ),
                " ",
                a!richTextItem(
                  text: "Furnace, VA",
                  color: "#666666"
                )
              },
              marginBelow: "NONE"
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "campground"
                ),
                " ",
                a!richTextItem(
                  text: "33 campsites available",
                  color: "#666666"
                )
              }
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!forEach(
                  items: {
                    "Potable Water",
                    "Flush Toilets",
                    "Showers",
                    "Electric Hookups",
                    "Camp Store"
                  },
                  expression: {
                    a!richTextItem(
                      text: fv!item & if(fv!isLast,""," • "),
                      size: "SMALL"
                    )
                  }
                )
              }
            )
          },
          shape: "SEMI_ROUNDED",
          padding: "STANDARD",
          marginBelow: "NONE",
          borderColor: "#D0DBCD"
        ),
        a!cardLayout(
          contents: {
            a!cardLayout(
              contents: {
                a!headingField(
                  text: "Fox Hollow Campground",
                  size: "SMALL",
                  marginBelow: "NONE",
                  link: a!dynamicLink(),
                  color: "#222222",
                  headingTag: "H3"
                )
              },
              height: "EXTRA_SHORT",
              padding: "NONE",
              showBorder: false
            ),
            a!imageField(
              labelPosition: "COLLAPSED",
              images: {
                a!webImage(
                  source:"https://images.unsplash.com/photo-1694094672701-4d9c4dd51c7e?q=80&w=3542&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                )
              }
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "map-pin"
                ),
                " ",
                a!richTextItem(
                  text: "McMullen, VA",
                  color: "#666666"
                )
              },
              marginBelow: "NONE"
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "campground"
                ),
                " ",
                a!richTextItem(
                  text: "8 campsites available",
                  color: "#666666"
                )
              }
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!forEach(
                  items: {
                    "Potable Water",
                    "Flush Toilets",
                    "Showers",
                    "Electric Hookups",
                    "Camp Store"
                  },
                  expression: {
                    a!richTextItem(
                      text: fv!item & if(fv!isLast,""," • "),
                      size: "SMALL"
                    )
                  }
                )
              }
            )
          },
          shape: "SEMI_ROUNDED",
          padding: "STANDARD",
          marginBelow: "NONE",
          borderColor: "#D0DBCD"
        ),
        a!cardLayout(
          contents: {
            a!cardLayout(
              contents: {
                a!headingField(
                  text: "Boulder Brook State Park",
                  size: "SMALL",
                  marginBelow: "NONE",
                  link: a!dynamicLink(),
                  color: "#222222",
                  headingTag: "H3"
                )
              },
              height: "EXTRA_SHORT",
              padding: "NONE",
              showBorder: false
            ),
            a!imageField(
              labelPosition: "COLLAPSED",
              images: {
                a!webImage(
                  source: "https://images.unsplash.com/photo-1624295886404-efeedb1cf4e9?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                )
              }
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "map-pin"
                ),
                " ",
                a!richTextItem(
                  text: "Simmons Gap, VA",
                  color: "#666666"
                )
              },
              marginBelow: "NONE"
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "campground"
                ),
                " ",
                a!richTextItem(
                  text: "2 campsites available",
                  color: "#666666"
                )
              }
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!forEach(
                  items: {
                    "Potable Water",
                    "Flush Toilets",
                    "Showers",
                    "Electric Hookups",
                    "Camp Store"
                  },
                  expression: {
                    a!richTextItem(
                      text: fv!item & if(fv!isLast,""," • "),
                      size: "SMALL"
                    )
                  }
                )
              }
            )
          },
          shape: "SEMI_ROUNDED",
          padding: "STANDARD",
          marginBelow: "NONE",
          borderColor: "#D0DBCD"
        ),
        a!cardLayout(
          contents: {
            a!cardLayout(
              contents: {
                a!headingField(
                  text: "Pine Hollow",
                  size: "SMALL",
                  marginBelow: "NONE",
                  link: a!dynamicLink(),
                  color: "#222222",
                  headingTag: "H3"
                )
              },
              height: "EXTRA_SHORT",
              padding: "NONE",
              showBorder: false
            ),
            a!imageField(
              labelPosition: "COLLAPSED",
              images: {
                a!webImage(
                  source: "https://images.unsplash.com/photo-1519981337-7295e387c157?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                )
              }
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "map-pin"
                ),
                " ",
                a!richTextItem(
                  text: "Stanardsville, VA",
                  color: "#666666"
                )
              },
              marginBelow: "NONE"
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextIcon(
                  icon: "campground"
                ),
                " ",
                a!richTextItem(
                  text: "No campsites available",
                  color: "#666666"
                )
              }
            ),
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!forEach(
                  items: {
                    "Potable Water",
                    "Flush Toilets",
                    "Showers"
                  },
                  expression: {
                    a!richTextItem(
                      text: fv!item & if(fv!isLast,""," • "),
                      size: "SMALL"
                    )
                  }
                )
              }
            )
          },
          shape: "SEMI_ROUNDED",
          padding: "STANDARD",
          marginBelow: "NONE",
          borderColor: "#D0DBCD"
        )
      },
      cardWidth: "NARROW",
      fillContainer: false
    )
  },
  backgroundColor: "#F9FDF7"
)

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	Incompatible	Cannot be used in autoscaled processes.

Feedback

Was this page helpful?

Heading Component

Function

Parameters

Examples