Avonni Flow Components
Get It on the AppExchangeUse Cases Gallery
Search
⌃K
Links

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.

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. 1.
    Click on the Avatar section to expand settings.
  2. 2.
    Select an icon or an image from your computer.
  3. 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 the Header

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.

Tutorials

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 Hooks

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
Screen Components - Previous
Formatted Value
Next - Screen Components
Hero Banner
Last modified 2mo ago