Ctrlk
YouTube ChannelBook A Demo🪄 Build with AISubscribe for Updates
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Header

The Avonni Header provides a straightforward way to add titles, subtitles, icons, images, and navigation links to create informative and visually engaging headers

Tutorials

Basic Customization

Cover

Building Engaging Card Headers

Cover

Adding a Background Image to Your Header

Advanced Header Features

Cover

Crafting a Profile Header

Cover

Adding Action Buttons to Headers

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.

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, which offers advanced capabilities for managing and passing record context across components.

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 (px) — 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.

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

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

Avatar

The Header can display an avatar — a user profile picture, company logo, or any other image. Expand the Avatar section, then configure its Initials, Icon Name (fallback icon), Image, shape (Variant — Circle or Square), Size, Position relative to the header content, and Alternative Text.

Advanced Options

The Avatar group includes responsive Position on Small Container, Position on Medium Container, and Position on Large Container settings that control where the avatar sits at the 480 px, 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; each action has a Label, Name, Icon Name, Title, Alternative Text, and Disabled and Hidden toggles.

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

Hide Actions — hides the header action buttons.

Disable Actions — disables the header action buttons.

Avatar Actions — a separate set of action buttons attached to the avatar. Each avatar action has a Label, Name, Icon Name, and Disabled and Hidden toggles.

Hide Avatar Actions — hides the avatar action buttons.

Disable Avatar Actions — disables the avatar action buttons.

Progress

Value — the progress value in percentage (0 to 100). When set, a progress indicator is shown in the header.

Progress Attributes — customize the indicator's Type (bar or circle), Position, Size, thickness, and Label. Requires Value.

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

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.

Controls the inner spacing between the component's content and its border.

  • Top / Right / Bottom / Left: Adjust the inner spacing on each side.

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.

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.

Styles the modal dialog opened by an Open Flow Dialog interaction.

  • Header Background / Header Border Color / Header Border Size: Style the dialog header.

  • Header Label Color / Header Label Font Size / Header Label Font Weight: Control the dialog header label typography.

  • Footer Background / Footer Border Color / Footer Border Size: Style the dialog footer.

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.

Styles the header container.

  • Background: Set the header background color.

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.

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.

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.

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.

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.

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.

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.

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.

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 or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.

Last updated

Was this helpful?