Header

A header provides a short summary of content.

📘 Overview

The Avonni Header flow screen is a customizable UI component for creating visually appealing headers in Salesforce. It allows users to add icons, images, and navigation links to the header. The component is easy to configure and offers an intuitive interface for creating a professional-looking header. Its versatility makes it an essential component for any Salesforce Flow Screen toolkit.

🎓 Tutorials

Name	Description	Illustration
Building Engaging Card Headers	Learn to create and customize striking card headers in screen flows with the Header component.
Crafting a Profile Header	Master creating a profile card with a stunning, functional header in screen flows.
Adding Action Buttons to Headers	Discover how to enhance your header component with actionable buttons in this step-by-step guide.
Adding a Background Image to Your Header	Learn to easily add a background image to your header component with this straightforward guide, enhancing its visual appeal.

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

• Is Text Outside: the title will be outside the header

• 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. You can adjust the size and position of the avatar using the Image settings section.

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.

🪄 Adding Interactions

Interactions define what will happen when users click on an action. You can find a list of interactions that are available here.

Here are the available Actions for the Header Component:

• On Action click

• On Avatar Action click

🎨 Styling

From the Styles panel, you can customize styling attributes for the Header:

• Background

• Title

• Caption

• Avatar

• Avatar Action

• Border Bottom

You can find the instructions for styling here.

🎛️ Specifications

Attributes

Name	Type	Description
actions	HeaderAction[]	Display actions as buttons.
avatar	HeaderAvatar	Display an Avatar in the header.
avatarActions	HeaderAvatarAction[]	Display actions on the avatar with a button menu icon.
backgroundSrc	String	Add a background image to the header.
caption	String	The caption can include text, and is displayed over the title.
isJoined	Boolean	To unify the header component to your subsequent components.
isTextOutside	Boolean	Title will be outside the header content.
pullToBoundary	Boolean	This attribute pulls the elements on either side of the container to the boundary.
title	String	The title can include text, and is displayed in the header.
variant	String	The Variant changes the shape of the avatar.
visibleActionsButtons	Integer	Number of visible actions buttons to be displayed.

Events

Name	Description
actionClick	The event fired when the action is clicked
avatarActionClick	The event fired when the avatar action is clicked

Styling

Name	Description
Header Background Color	Define a background color for the Header

Title

Name	Description
Text Color	Define a text color for the title
Font Size	Define a font size for the title
Font Style	Define a font style for the title
Font Weight	Define a font weight for the title
Line Height	Define a line height for the title
Text Shadow	Define a text shadow for the title
Horizontal Alignment	Define a horizontal alignement for the title

Caption

Name	Description
Text Color	Define a text color for the caption
Font Size	Define a font size for the caption
Font Style	Define a font style for the caption
Font Weight	Define a font weight for the caption
Line Height	Define a line height for the caption
Text Shadow	Define a text shadow for the caption
Horizontal Alignment	Define a horizontal alignment for the caption

Avatar

Name	Description
Border Size	Define a border size for the avatar.
Border Color	Define a border color for the avatar.
Border Style	Define a border style for the avatar.
Initials Font Color	Define initials font color for the avatar.
Initials Font Color Hover	Define initials font color hover for the avatar.
Initials Font Weight	Define initials font weight for the avatar.
Initials Font Weight Hover	Define initials font weight hover for the avatar.
Icon Background Color	Define icon background color for the avatar.
Icon Foreground Color	Define icon foreground color for the avatar.
Icon Foreground Color Default	Define icon foreground color default for the avatar.

Avatar Action

Name	Description
Background Color	Define a background color for the avatar action.
Foreground Color	Define a foreground color for the avatar action.
Border Radius	Define a border radius for the avatar action.

Border Bottom

Name	Description
Border Bottom Size	Define a border bottom size
Border Bottom Color	Define a border bottom color
Border Bottom Style	Define a border bottom style