# Header ## Overview The Avonni Header component adds titles, subtitles, icons, images, and structure to your Salesforce Dynamic Components. As a layout element, it focuses on presentation to draw attention and provide context without tying to specific data objects. Key features include: * **Text Elements:** Caption, title, and subtitle for layered information. * **Visuals:** Icons and background images for engagement. * **Dynamic Binding:** Link to variables, formulas, or record fields for adaptability. * **Integration:** "Joined" option to blend with content below. * **Simplicity:** Quick setup for headers in pages, sections, or forms. ### Use Cases * **Page Headers:** Top-level titles on App or Record Pages (e.g., "Account Overview"). * **Section Dividers:** Organize content in Cards or Containers (e.g., "Billing Details"). * **Form Headers:** Label input groups (e.g., "Create New Contact"). * **Dashboard Labels:** Title charts or metrics sections. * **Visual Separation:** Break up long pages for better readability. ### Choosing Between Header and Card Components Both can serve as headings, but select based on needs: | Component | Best For | Key Differences | | --------- | ------------------------------------------------ | ----------------------------------------------------------------------- | | Header | Simple, standalone titles with basic icons/text. | Focuses on text/icon; no slot for nested components. | | Card | Integrated headings with content below. | Includes slots for other elements; more layout flexibility and styling. | ## Configuration Select the Header on the canvas to access properties in the right-hand Properties Panel. ### **Properties** These control text, visuals, and behavior. | Property | Type | Description | Example | | ---------------- | ----------------------- | ------------------------------------------------------------------------ | ----------------------------------------------- | | API Name | Text | Unique identifier for referencing in interactions/formulas. | AccountHeader | | Caption | Text/Binding (Optional) | Short text above title; static or bound to Variable/Formula. | "Account" or {!accountType} | | Title | Text/Binding | Main heading; bind for dynamics (e.g., record fields). | "Account Details" or $Component.record.Name | | Subtitle | Text/Binding (Optional) | Text below title for details. | "Industry: {!industryVar}" | | Icon Name | Text/Binding (Optional) | SLDS or Avonni icon next to title; dynamic via formula. | standard:account | | Background Image | Text/URL (Optional) | URL for background; bind to variable for dynamics. | "" or {!bgImageVar} | | Is Joined | Boolean | Connects header visually to content below (e.g., removes bottom border). | On for integrated look. | *Tip:* For icons, reference Salesforce Lightning Design System (SLDS) docs for names. Bind properties to make headers context-aware. ## Examples ### **Static Header** 1. **Configure Properties:** * Caption: (Blank) * Title: "Account Details" * Subtitle: "Information about the current Account" * Icon Name: standard:account * Background Image: (None) * Is Joined: On **Result:** A basic, unchanging header with icon, ideal above a static Data Table.
### **Dynamic Header on Account Record Page** 1. **Configure Properties:** * **Set the Target Page Object to Account**: In your Dynamic Component's settings (e.g., in the canvas or main properties), select "Account" as the [Target Page Object](https://docs.avonnicomponents.com/dynamic-components/getting-started/understanding-the-essentials/target-page-object).\ **Why do this?** This tells the component it's placed on an Account Record Page, enabling access to the current record's data via bindings like $Component.record.FieldName. Without it, dynamic record bindings won't work, and the header would remain static.\ ![](https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FyMn9I0fIBrjfQG7MNaI3%2F2025-07-14_14-12-58.png?alt=media\&token=a968bcc0-f4f8-4784-aebb-ed35c885c204) * **Caption**: "Account" * **Title**: `$Component.record.Name` (mapped to the current Account's Name field) * **Subtitle**: `$Component.record.Industry` (mapped to the current Account's Industry field) * **Icon Name**: `standard:account` * **Background Image**: (None) * **Is Joined**: On **Result:** Header updates per record (e.g., Title shows "Acme Corp"), with dynamic Subtitle.
## Key Considerations * **Dynamic Power:** Bind Caption/Title/Subtitle to Record Variables or Target Page Object for context-sensitive headers (e.g., user-specific or record-based). * **Icon Selection:** Choose relevant SLDS icons; test for visual consistency across devices. * **Background Images:** Select high-contrast images to ensure text readability; avoid overuse to prevent distraction. * **Is Joined Option:** Toggle to integrate with below content. * **Accessibility:** Use clear, hierarchical text; add alt text if images/icons need it via custom attributes. * **Performance:** Dynamic bindings may require efficient formulas to avoid delays on load. ## **Troubleshooting Common Issues** * **Bindings Not Updating:** Verify resource names (e.g., $Component.record.Name); check page context (App vs. Record). * **Icon Not Displaying:** Confirm valid SLDS name; browse Avonni/SLDS docs for options. * **Background Overlays Text:** Adjust image opacity via CSS if supported, or choose lighter images. * **No Visual Connection:** Ensure Is Joined is on and no conflicting borders in parent components. * **Static Despite Bindings:** Test with sample data; refresh canvas or preview in app. ## Summary The Avonni Header component delivers flexible, engaging titles for structuring Dynamic Components. With dynamic bindings and visuals, it's essential for clear, contextual UIs in Salesforce. For related components, see Avonni Card or Layout Guide.