> 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/flow/flow-components/header.md).

# Header

<figure><img src="/files/Td94g6ECf9xl6QCERZa5" alt="" width="375"><figcaption></figcaption></figure>

***

## Tutorials

### Basic Customization

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Building Engaging Card Headers</strong></td><td></td><td></td><td><a href="/files/P0KZrP7u9QzMPvHu5jNa">/files/P0KZrP7u9QzMPvHu5jNa</a></td><td><a href="/pages/RFvtij1U974LUKvCu8tW">/pages/RFvtij1U974LUKvCu8tW</a></td></tr><tr><td><strong>Adding a Background Image to Your Header</strong></td><td></td><td></td><td><a href="/files/xJ8uKvT2Cmhm3iMhqb0T">/files/xJ8uKvT2Cmhm3iMhqb0T</a></td><td><a href="/pages/amJj2bCaMcOIBXpClQ5I">/pages/amJj2bCaMcOIBXpClQ5I</a></td></tr></tbody></table>

### Advanced Header Features

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Crafting a Profile Header</strong></td><td></td><td></td><td><a href="/files/FdzC4Zd6o14DOcEExDW2">/files/FdzC4Zd6o14DOcEExDW2</a></td><td><a href="/pages/9tnmM02K83RonujAIkkO">/pages/9tnmM02K83RonujAIkkO</a></td></tr><tr><td><strong>Adding Action Buttons to Headers</strong></td><td></td><td></td><td><a href="/files/tUmvhdXka7lFPk2E9lOr">/files/tUmvhdXka7lFPk2E9lOr</a></td><td><a href="/pages/6WYDj2JK0qm68zoU7O3S">/pages/6WYDj2JK0qm68zoU7O3S</a></td></tr></tbody></table>

***

## Overview

The Header component renders a structured page or section header with a title, optional caption, subtitle, background image, and avatar. Action buttons can be added to trigger flow logic, and navigation links can be attached to the title, subtitle, or caption. Use it to set the context at the top of a flow screen or to create profile-style cards.

{% hint style="danger" %}
**Important**

Due to limitations within Flow Builder, the Header component cannot directly access variable information from components that lack context about a specific record. When configuring interactions using record variables within a flow, ensure the components involved are contextually aware of the record. **For scenarios where context is challenging to establish, consider using the** [**Avonni Dynamic Components package**](https://github.com/avonni/xp-sfdx/blob/main/docs/dynamic-components/getting-started/dynamic-vs.-flow-components.md)**, which offers advanced capabilities for managing and passing record context across components.**
{% endhint %}

## Configuration

To configure it, click the component on the Flow screen. The Edit Header Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

### Properties

**Title** — the main heading text displayed in the header. When provided, the title slot may not appear in the canvas preview.

**Caption** — short context text above the title.

**Subtitle** — secondary text displayed below the title or caption.

**Background Image** — set a URL for a background image displayed behind the header content.

**Height** — when set, defines the header height in pixels.

**Is Joined** — removes the bottom border radius and shadow so the header sits flush against the component directly below it.

<figure><img src="/files/L4FMNRROBOAraE8LtFH1" alt=""><figcaption></figcaption></figure>

**Is Text Outside** — moves the title text outside of the header container.

<figure><img src="/files/vujpTtGr4OOXlIpww6Av" alt=""><figcaption></figcaption></figure>

**Pull to Boundary** — pulls the elements on either side of the container to the boundary edge.

**Progress Value** / **Progress Attributes** — configure an optional progress bar or circle in the header. Set the numeric progress value and customize its type, position, size, thickness, and label.

### Avatar

The Header can display an avatar — a user profile picture, company logo, or any other image.

1. Click on the **Avatar** section to expand the settings.
2. Select an icon or image.
3. Set the variant, size, and position.

### Advanced Options

The Avatar group includes responsive **Position on Medium Container** and **Position on Large Container** settings that control where the avatar sits at 768 px and 1024 px breakpoints respectively.

### Actions

Expand the **Actions** section to add header action buttons. You can add as many actions as you want.

**Visible Actions Buttons** — controls how many buttons are shown before remaining actions move into an overflow menu.

<figure><img src="/files/ffdzushhu0qiYEM25oi3" alt=""><figcaption></figcaption></figure>

### Title Link

Configure a navigation interaction triggered when the user clicks the title text.

### Sub Title Link

Configure a navigation interaction triggered when the user clicks the subtitle text.

### Caption Link

Configure a navigation interaction triggered when the user clicks the caption text.

### Help text

Add contextual help text attributes to the header component.

## Interactions

[Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the Header. Configure them from the **Interactions** tab of the Edit Header panel.

### Action Click

Fires when a user clicks an action button in the header. The name of the clicked action is available as the `targetName` output variable, which you can use to drive conditional logic or trigger different flow paths per action.

### Avatar Action Click

Fires when a user clicks an action associated with the avatar. The name of the clicked avatar action is available as the `targetName` output variable, which you can use to open a user profile, display a contact menu, or trigger a user-specific flow action.

## Styling

The **Style** tab gives you fine-grained control over the Header's appearance. Configure it from the **Style** tab of the Edit Header panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the component, creating space between it and other elements on the screen.

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

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

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

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

* **Width / Height:** Set fixed dimensions for the component.
* **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="Border" %}
Customizes the border surrounding the component.

* **Color:** Set the border color.
* **Size:** Adjust the border thickness.
* **Style:** Choose a border style (e.g. solid, dashed, dotted).
* **Radius:** Control the roundness of the corners.
  {% endtab %}

{% tab title="Border Bottom" %}
Customizes the bottom border only, useful for separating the header from content below when joined.

* **Color:** Set the bottom border color.
* **Size:** Adjust the bottom border thickness.
* **Style:** Choose a bottom border style.
  {% endtab %}

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

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

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

* **Color:** Set the title text color.
* **Font Size / Font Weight / Font Family:** Control the title typography.
* **Line Height:** Adjust line spacing.
* **Text Shadow:** Apply a shadow to the title.
* **Horizontal Alignment:** Align the title within the header.
  {% endtab %}

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

* **Color:** Set the caption text color.
* **Font Size / Font Weight / Font Family:** Control the caption typography.
* **Line Height:** Adjust line spacing.
* **Text Shadow:** Apply a shadow to the caption.
* **Horizontal Alignment:** Align the caption within the header.
  {% endtab %}

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

* **Color:** Set the subtitle text color.
* **Font Size / Font Weight / Font Family:** Control the subtitle typography.
* **Line Height:** Adjust line spacing.
* **Text Shadow:** Apply a shadow to the subtitle.
* **Horizontal Alignment:** Align the subtitle within the header.
  {% endtab %}

{% tab title="Actions" %}
Styles the header action buttons across their default, active, and hover states.

* **Background Color / Background Color Active / Background Color Hover:** Set the button background in each state.
* **Text Color / Text Color Active / Text Color Hover:** Set the button text in each state.
* **Border Color / Border Color Active / Border Color Hover:** Set the button border in each state.
  {% endtab %}

{% tab title="Avatar" %}
Styles the header avatar.

* **Border Color / Border Size / Border Style:** Customize the avatar border.
* **Initials Font Color / Initials Font Color Hover / Initials Font Weight / Initials Font Weight Hover:** Control the avatar initials typography.
* **Icon Background Color / Icon Foreground Color:** Set the avatar icon colors.
* **Image Object Fit:** Control how an avatar image fills its frame.
  {% endtab %}

{% tab title="Avatar Actions" %}
Styles the buttons attached to the avatar.

* **Background Color / Foreground Color:** Set the action button colors.
* **Border Color / Border Radius:** Customize the action button border.
  {% endtab %}

{% tab title="Progress Bar" %}
Styles a progress bar shown in the header.

* **Color / Completed Color:** Set the bar track and fill colors.
* **Label Font Color / Label Font Size / Label Font Style / Label Font Weight:** Control the label typography.
* **Value Color / Value Font Size / Value Font Style / Value Font Weight:** Control the value typography.
  {% endtab %}

{% tab title="Progress Circle" %}
Styles a progress circle shown in the header.

* **Background Color / Color / Completed Color:** Set the circle background, track, and fill colors.
* **Label Font Color / Label Font Style / Label Font Weight:** Control the label typography.
* **Value Color / Value Font Style / Value Font Weight:** Control the value typography.
  {% endtab %}
  {% endtabs %}

## Output Variables

The Header exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Header component, and pick the output variable you need.

### Action Clicks

Captures which action button the user clicked — either a header action or an avatar action.

| Output variable                | Type          | What it returns                                                                                                                                        |
| ------------------------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Clicked Action Name**        | Text (String) | The name of the header action button the user clicked. Use this to branch flow logic based on which action was triggered.                              |
| **Clicked Avatar Action Name** | Text (String) | The name of the avatar action button the user clicked. Use this to drive user-specific logic such as opening a profile or triggering a contact action. |

> **Example:** Add two header actions named `edit` and `delete`. After the screen, check **Clicked Action Name** in a Decision element — route to an update flow when it equals `edit`, or to a confirmation screen when it equals `delete`.

### Flow Interaction Output Variables

Like all interactive Flow components, the Header exposes generic output slots (Variable 1–10) that an [Open Flow Dialog](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md).


---

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

```
GET https://docs.avonnicomponents.com/flow/flow-components/header.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.