Header
The Avonni Header provides a straightforward way to add titles, subtitles, icons, images, and navigation links to create informative and visually engaging headers.
Last updated
Was this helpful?
The Avonni Header provides a straightforward way to add titles, subtitles, icons, images, and navigation links to create informative and visually engaging headers.
Last updated
Was this helpful?
The Header component is a layout element, meaning it's primarily about presentation and structure, not about displaying data from a specific Salesforce object. It's designed to draw the user's attention and provide context.
Page Headers: Use a Header at the top of a Dynamic Component placed on an App Page or Record Page. This provides a clear title for the entire page.
Section Headers: Within a larger Dynamic Component (e.g., inside a Card or Container), use Header components to divide content into logical sections. This improves organization and readability.
Form Headers: Place a Header above a group of input fields to indicate the form's purpose (e.g., "Create New Contact," "Edit Account Details," etc.).
Dashboard Headers: Use Headers to label different sections or charts within a dashboard.
Visual separation: Visually separate sections.
Both components can create headings, but choose based on your needs:
: For simple, standalone titles. Provides basic text and icon options.
: For integrated headings that are visually part of the content. Allows you to include other components within the heading area. Offers more layout and styling flexibility.
The Header component has the following properties, which you can configure in the Properties Panel:
A unique identifier for the component within your Dynamic Component. This is used to reference the component in interactions, formulas, and nested components.
A short text string displayed above the main title. Use this for brief context, a label, or a short instruction. You can enter static text directly or click the resource selector icon (usually a variable/tag icon) next to the Caption field to bind it to a Variable, Constant, or Formula resource. This allows you to change the Caption dynamically based on data or user input.
The main heading text. This is the most prominent text element. Like the Caption, you can enter static text directly or bind the Title to a dynamic value (Variable, Constant, Formula, or Component Attribute). On a record page, you'll often bind the Title to a field from the current record (e.g., $Component.record.Name).
Text displayed below the main title. Use this for additional information, a description, or a sub-heading. Again, this can be static text or a dynamic value.
The name of an Avonni icon (or a Salesforce SLDS icon) to display next to the title. This adds a visual cue—examples: utility:info, standard:account. You can find a list of available icons in the Avonni documentation and the Salesforce Lightning Design System documentation. You can also use a dynamic value here (e.g., a Formula that returns a different icon name based on a condition).
Allows to set a background image.
If enabled, this visually connects the header to the content below it. This is typically done by removing or modifying the bottom border of the Header. It creates a more integrated look, as if the header is part of the content area, rather than a separate section.
This creates a simple, static header with a title, subtitle, and icon. It doesn't change based on data.
This header is dynamic. The Title will change to reflect the Name of the current Account record being viewed, and the subtitle. The Subtitle will also update dynamically based on the Industry.
Caption: (Blank)
Title: Account Details
Subtitle: Information about the current Account
Icon Name: standard:account
Background Image: @backgroundImage (This assumes you have a variable that stores a URL Image).
Is Joined: (Checked)
Dynamic Content: The real power of the Header component comes from using dynamic values for the Caption, Title, and Subtitle. This allows the header to adapt to the current context (e.g., the current record, user selections, etc.).
Icon Choice: Select icons that are relevant and visually consistent.
Background Images: Use background images sparingly. Ensure they don't make the text difficult to read. High-quality images are important.
"Is Joined": Experiment with this setting to see how it visually connects the header to the content.
Accessibility: Make sure your header text is clear and provides a good heading structure.
The Header Component is helpful to display a title section within your Dynamic Componen.t