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

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

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

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

## Examples

### 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="/files/btLUPtYhxgrwhzpYBqLC" 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.\
   ![](/files/6MXuv2N9WhvHLO67UWOv)
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="/files/tWT0h2jiqW94saAvJOYg" 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.


---

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