Heading Component

On This Page

Function

a!headingField( text, size, headingTag, color, fontWeight, Link, showWhen, align, marginAbove, marginBelow, preventWrapping ) 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.
Show When	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"`.
Prevent Wrapping	preventWrapping	Boolean	Determines if wrapping to multiple lines will be prevented. When set to true, the header will truncate to a single line. Default: false.

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

The following recipes include usage of the Heading Component.

Cards as List Items Patterns (Choice Components, Images):
Use the cards as list items pattern to create visually rich lists as an alternative to grids or feeds. This pattern uses a combination of cards and billboards to show lists of like items. You can easily modify the pattern to change the card content or the number of cards per row to fit your use case.
Document List Pattern (Documents):
Use the document list items pattern to display a list of documents that can be searched and filtered. This pattern uses a combination of cards and rich text to show an easy to navigate list of documents of different types.
Grid with Selection Pattern (Grids, Heading component):
This pattern is an example of good UX design for a grid that allows users to select items and easily view their selections when there are multiple pages of data. It also provides information on a common save behavior.
Upload Multiple Documents in an Editable Grid (Document Management, Records):
Build a form that allows users to create a record and upload related documents in an editable grid.
User List Pattern (Looping):
The user list pattern retrieves all the users in a specified group and displays them in a single column.
Year-Over-Year Report (Charts, Reports, Formatting):
This is a feature-rich, interactive report for sales and profits by products over select periods of time.

Feedback

Was this page helpful?

Heading Component

Function

Parameters

Examples