> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/header.md).

# Header

The Avonni Header component displays a structured page or section header with optional caption, title, subtitle, icon, and background image. Use it to introduce content areas, separate sections, or provide visual context on any Dynamic Component page.

## Overview

The Header is a presentation component — it focuses on layout and hierarchy without tying to a specific data source. Key features include:

* **Text layers:** Caption (above the title), Title, and Subtitle for structured hierarchy.
* **Visuals:** An optional SLDS icon next to the title and a background image for visual depth.
* **Help text:** Inline help icon with configurable content and appearance.
* **Joined mode:** Removes the bottom border and shadow so the header sits flush against the component below.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FLWqHnrdSYrwoGq31dNwN%2Fheader-anatomy.png?alt=media" alt="A header showing caption, title, subtitle, icon and help icon"><figcaption><p>Caption, title, subtitle, the icon beside the title, and the help icon.</p></figcaption></figure>

### Use Cases

* **Page headers:** Top-level titles on App or Record pages (e.g., "Account Overview").
* **Section dividers:** Organize content inside Cards or Containers (e.g., "Billing Details").
* **Form headers:** Label input groups (e.g., "Create New Contact").
* **Dashboard labels:** Title charts or metrics sections.
* **Visual separation:** Break up long pages for better readability.

### Choosing Between Header and Card Components

| Component | Best For                                         | Key Differences                                                         |
| --------- | ------------------------------------------------ | ----------------------------------------------------------------------- |
| Header    | Simple, standalone titles with basic icons/text. | Focuses on text/icon; no slot for nested components.                    |
| Card      | Integrated headings with content below.          | Includes slots for other elements; more layout flexibility and styling. |

## Configuration

To configure the Header, select it on the canvas. The configuration panel opens on the right. The sections below mirror the Properties panel from top to bottom.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FFO0tn78Q5CHfio1eoG84%2Fheader-builder-properties.png?alt=media" alt="The Edit Header panel showing the Properties tab and the collapsed Help text section" width="320"><figcaption><p>The Properties tab, ending on the collapsed <strong>Help text</strong> section.</p></figcaption></figure>

### Properties

#### Caption

Short text displayed above the title. Use it to provide category or context information (e.g., "Account"). Supports static text or dynamic bindings to variables, formulas, or record fields.

#### Title

The main heading displayed in the header. Bind it to a variable or record field to make the header context-aware (e.g., the current Account Name). When the Title property is set, the custom title slot will not appear in the canvas.

#### Subtitle

Secondary text displayed below the title for additional detail (e.g., "Industry: Technology"). Supports static text and dynamic bindings.

#### Icon Name

The Lightning Design System name of the icon displayed alongside the title (e.g., `standard:account`). Accepts SLDS and Avonni icon names. Supports dynamic bindings.

#### Background Image

A URL or uploaded image file used as the header's background. Accepts common web image formats (PNG, JPG, SVG, GIF, WebP, AVIF). Supports dynamic bindings to a record field or variable.

#### Is Joined

When enabled, removes the bottom border radius and shadow so the header sits flush with the component directly below it. Use this when placing the Header above a Data Table, List, or other content component to create a seamless, unified look.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F6B00csYMzehV2gZ1Xwah%2Fheader-is-joined.png?alt=media" alt="The same header with Is Joined off and on, showing the bottom corners square when joined"><figcaption><p>The same header with <strong>Is Joined</strong> off and on. Joined squares off the bottom corners so the next component sits flush.</p></figcaption></figure>

### Help Text

The **Help text** panel group (collapsed by default) adds a contextual help icon to the header.

#### Content

The message displayed when the user hovers over or focuses on the help icon. Supports static text and dynamic bindings.

#### Icon Name

The SLDS icon used for the help trigger. Requires: **Content** to be set.

#### Variant

Changes the appearance of the help icon. Options: **Bare** (default), **Inverse**, **Warning**, **Error**. Requires: **Content** to be set.

#### Alternative Text

Assistive text for the help icon button, used by screen readers. Requires: **Content** to be set.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Use Cases

### Static Header

Configure the properties as follows:

* Caption: (blank)
* Title: "Account Details"
* Subtitle: "Information about the current Account"
* Icon Name: `standard:account`
* Background Image: (none)
* Is Joined: On

**Result:** A basic, unchanging header with an icon, ideal above a static Data Table.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-ce7b215d283e8f287b4f5727676c97e3fe7bdc23%2F2025-07-14_14-07-08.png?alt=media" alt=""><figcaption></figcaption></figure>

### Dynamic Header on Account Record Page

1. In your Dynamic Component's settings, set the [Target Page Object](/dynamic-components/core-concepts/target-page-object.md) to **Account**. This enables `$Component.record.*` bindings.\
   ![](https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-56f876b9cf0850a2c447d85f0735464329aa9de5%2F2025-07-14_14-12-58.png?alt=media)
2. Configure the properties:
   * **Caption**: "Account"
   * **Title**: `$Component.record.Name`
   * **Subtitle**: `$Component.record.Industry`
   * **Icon Name**: `standard:account`
   * **Is Joined**: On

**Result:** The header updates per record — the Title shows the current Account name and the Subtitle shows its Industry.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fgit-blob-0312584c3a2ad85e6289ff2cdf1e6c7fc55c4915%2F2025-07-14_14-09-32.png?alt=media" alt=""><figcaption></figcaption></figure>

## Key Considerations

* **Dynamic bindings:** Bind Caption, Title, or Subtitle to record variables or the Target Page Object for context-sensitive headers.
* **Icon selection:** Use valid SLDS icon names; test for visual consistency across devices.
* **Background images:** Choose high-contrast images to ensure text readability.
* **Is Joined:** Toggle on when placing the Header directly above a content component to remove the visual gap.
* **Accessibility:** Use clear, hierarchical text; provide Alternative Text for the help icon when used.

## Troubleshooting Common Issues

* **Bindings not updating:** Verify resource names (e.g., `$Component.record.Name`) and confirm the Target Page Object is set correctly.
* **Icon not displaying:** Confirm the SLDS icon name is valid; browse the Salesforce SLDS icon library for options.
* **Background overlays text:** Choose a lighter or lower-contrast image, or consider omitting the background.
* **No visual connection to content below:** Ensure **Is Joined** is enabled and no conflicting borders exist on the parent component.
* **Static content despite bindings:** Test with sample data in the canvas preview and refresh if needed.

## Styling

Configure the Header's appearance from the **Style** tab of the Edit Header panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the header.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the header's content and its border.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Size" %}
Controls the header's dimensions.

* **Width / Height:** Set fixed dimensions.
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
* **Overflow:** Control how content that exceeds the bounds is handled.
  {% endtab %}

{% tab title="Header" %}
Styles the header container.

* **Background Color:** Set the header background color.
  {% endtab %}

{% tab title="Title" %}
Styles the header title text.

* **Color / Font Size / Font Weight / Font Family / Line Height / Text Shadow:** Set the title typography.
* **Horizontal Alignment:** Align the title.
  {% endtab %}

{% tab title="Caption" %}
Styles the header caption text.

* **Color / Font Size / Font Weight / Font Family / Line Height / Text Shadow:** Set the caption typography.
* **Horizontal Alignment:** Align the caption.
  {% endtab %}

{% tab title="Subtitle" %}
Styles the header subtitle text.

* **Color / Font Size / Font Weight / Font Family / Line Height / Text Shadow:** Set the subtitle typography.
* **Horizontal Alignment:** Align the subtitle.
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/header.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.