Header
The Avonni Header provides a straightforward way to add titles, subtitles, icons, images, and navigation links to create informative and visually engaging headers.
Overview
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.
Use Cases
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 purpose of the form (e.g., "Create New Contact," "Edit Account Details").
Dashboard Headers: Use Headers to label different sections or charts within a dashboard.
Visual separation: Visually separate sections.
Choosing Between the Header and Card Components for Headings
Both components can create headings, but choose based on your needs:
Properties
The Header component has the following properties, which you can configure in the Properties Panel:
API Name
A unique identifier for the component within your Dynamic Component. This is used to reference the component in interactions, formulas, and nested components.
Caption (Optional)
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.
Title
The main heading text. This is the most prominent text element. Like the Caption, you can enter static text directly, or you can 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).
Subtitle (Optional)
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.
Icon Name (Optional)
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).
Background Image (Optional)
Allows to set a background image.
Is Joined (Optional)
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.
Examples
Example 1: Static Header
This creates a simple, static header with a title, subtitle, and icon. It doesn't change based on data.
Example 2: Dynamic Header (on an Account Record Page)
This header is dynamic. The Title will change to reflect the Name of the current Account record being viewed. The Subtitle will also update dynamically based on the Industry.
Example 3: Dynamic Header (background image)
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)
Important Considerations
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.
In Summary: The Header Component is useful to display a title section within your Dynamic Component
Last updated
Was this helpful?