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

***

## Changing the Properties

### Adding a title

This is where you will add an overall title to the header component.

### Adding a caption

Used to contain more information about the header component

### Adding a background image

Here are some additional details about adding a background image to the header:

* The background image can be any file type, such as JPEG, PNG, or GIF.
* The background image will be displayed behind the header text and other content.

### Various visual options

* **`Is Joined`**: to unify the header component to your subsequent components inside your screen flow.

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

* **`Is Text Outside`**: the title will be outside the header

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

* **`Pull to Boundary`**: to pull the elements on either side of the container to the boundary.

### Adding an Avatar

The Avonni Header Flow Screen Component can display an avatar. The avatar can be a user's profile picture, a company logo, or any other image.

To add an avatar to the header, follow these steps:

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

The avatar will be displayed in the header. In the Image settings section, you can adjust its size and position.

### Adding Actions

Expand the Actions menu to add actions on the header component. You can add as many actions as you want and define the number of visible action buttons you want to display.

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

***

## Adding Interactions

Interactions define what happens when users click on an action. A list of interactions is available [here](/flow/component-builder/interactions-panel.md).

Here are the available actions for the Header Component:

* **`On Action click`:** Define actions to be performed when a user clicks a button within the header. This could include navigating a different screen, opening a modal, or triggering a specific flow action.
* **`On Avatar Action click`:** Define actions to be performed when a user clicks on an avatar within the header. This could include opening a user profile page, displaying a contact menu, or triggering a specific action related to the user.

{% 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**](/dynamic-components/welcome.md)**, which offers advanced capabilities for managing and passing record context across components.**
{% endhint %}

***

## Output Variables

The Header exposes 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

When users click an action button in the header, this variable identifies which action was triggered.

| Output variable         | Type          | What it returns                                                                                                                                                        |
| ----------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Clicked Action Name** | Text (String) | The name of the action button the user clicked (e.g., "New", "Export", "Settings"). Use in a **Decision** element to route the flow based on which action was pressed. |

> **Example:** A header has "New Contact" and "Export" action buttons. Use a **Decision** element to check if **Clicked Action Name** equals "New Contact" to navigate to a creation form, or "Export" to trigger a data export sub-flow.

### Avatar Action Clicks

When users click an action associated with the header's avatar, this variable identifies which avatar action was triggered.

| Output variable                | Type          | What it returns                                                                                                                                                                |
| ------------------------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Clicked Avatar Action Name** | Text (String) | The name of the avatar action the user clicked (e.g., "View Profile", "Edit Photo"). Use in a **Decision** element to route the flow based on which avatar action was pressed. |

> **Example:** A user profile header displays an avatar with "View Profile" and "Change Photo" actions. Use **Clicked Avatar Action Name** in a **Decision** element to navigate to the correct screen.

***

## Styling

The Styles panel allows you to customize the visual appearance of the Avonni Header component. You can modify various styling attributes to match your design preferences and branding.

### **Available Styling Options**

#### **Margin**

Control the spacing outside the header component. Adjust the top, right, bottom, and left margins to position the header relative to other elements on the page.

#### **Padding**

Control the spacing inside the header component between the header's content (title, subtitle, etc.) and its border. Adjust the padding of the top, right, bottom, and left to create a visual breathing room.

#### **Border**

Customize the appearance of the border surrounding the header. Adjust the border style (solid, dashed, dotted), color, and thickness.

#### **Border Bottom**

Specifically, customize the bottom border of the header. This can be useful for visually separating the header from the content below it.

#### **Size**

You can control the overall size of the header. Choose from predefined size options (small, medium, large) or set a custom height.

#### **Header**

Apply general styling to the entire header container. This can include background color, text color, and font styles.

#### **Title**

You can customize the appearance of the header's main title by changing the font size, weight, color, and alignment.

#### **Caption**

Customize the appearance of the header's caption text, which typically appears below the title. Adjust the font size, weight, color, and alignment.

#### **Subtitle**

Customize the appearance of the header's subtitle, which typically appears below the title or caption. Adjust the font size, weight, color, and alignment.

#### **Actions**

Customize the appearance of action buttons within the header. Adjust the button size, color, background, and icon styles.

#### **Avatar**

Customize the appearance of the user avatar displayed in the header. Adjust the size, shape, and border.

#### **Avatar Actions**

Customize the appearance of action buttons associated with the avatar. Adjust the button size, color, background, and icon styles.

#### **Progress Bar**

If your header includes a progress bar, customize its appearance here. Adjust the bar color, height, and background.

#### **Progress Circle**

If your header includes a progress circle, customize its appearance here. Adjust the circle color, size, and track thickness.

You can find the instructions for styling [here](/flow/component-builder/style-panel.md).&#x20;


---

# Agent Instructions: 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.