Ctrlk
YouTube ChannelBook A Demo🪄 Build with AIJoin The Community
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Header

The Avonni Header component displays a structured page or section header with optional caption, title, subtitle, icon, and background image. Use it to introduce content areas, separate sections, or provide visual context on any Dynamic Component page.

Overview

The Header is a presentation component — it focuses on layout and hierarchy without tying to a specific data source. Key features include:

  • Text layers: Caption (above the title), Title, and Subtitle for structured hierarchy.

  • Visuals: An optional SLDS icon next to the title and a background image for visual depth.

  • Help text: Inline help icon with configurable content and appearance.

  • Joined mode: Removes the bottom border and shadow so the header sits flush against the component below.

A header showing caption, title, subtitle, icon and help icon
Caption, title, subtitle, the icon beside the title, and the help icon.

Use Cases

  • Page headers: Top-level titles on App or Record pages (e.g., "Account Overview").

  • Section dividers: Organize content inside 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

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

To configure the Header, select it on the canvas. The configuration panel opens on the right. The sections below mirror the Properties panel from top to bottom.

The Edit Header panel showing the Properties tab and the collapsed Help text section
The Properties tab, ending on the collapsed Help text section.

Properties

Caption

Short text displayed above the title. Use it to provide category or context information (e.g., "Account"). Supports static text or dynamic bindings to variables, formulas, or record fields.

Title

The main heading displayed in the header. Bind it to a variable or record field to make the header context-aware (e.g., the current Account Name). When the Title property is set, the custom title slot will not appear in the canvas.

Subtitle

Secondary text displayed below the title for additional detail (e.g., "Industry: Technology"). Supports static text and dynamic bindings.

Icon Name

The Lightning Design System name of the icon displayed alongside the title (e.g., standard:account). Accepts SLDS and Avonni icon names. Supports dynamic bindings.

Background Image

A URL or uploaded image file used as the header's background. Accepts common web image formats (PNG, JPG, SVG, GIF, WebP, AVIF). Supports dynamic bindings to a record field or variable.

Is Joined

When enabled, removes the bottom border radius and shadow so the header sits flush with the component directly below it. Use this when placing the Header above a Data Table, List, or other content component to create a seamless, unified look.

The same header with Is Joined off and on, showing the bottom corners square when joined
The same header with Is Joined off and on. Joined squares off the bottom corners so the next component sits flush.

Help Text

The Help text panel group (collapsed by default) adds a contextual help icon to the header.

Content

The message displayed when the user hovers over or focuses on the help icon. Supports static text and dynamic bindings.

Icon Name

The SLDS icon used for the help trigger. Requires: Content to be set.

Variant

Changes the appearance of the help icon. Options: Bare (default), Inverse, Warning, Error. Requires: Content to be set.

Alternative Text

Assistive text for the help icon button, used by screen readers. Requires: Content to be set.

Set Component Visibility

All components support conditional visibility — see Component Visibility.

Use Cases

Static Header

Configure the properties as follows:

  • 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 an icon, ideal above a static Data Table.

Dynamic Header on Account Record Page

  1. In your Dynamic Component's settings, set the Target Page Object to Account. This enables $Component.record.* bindings.

  2. Configure the properties:

    • Caption: "Account"

    • Title: $Component.record.Name

    • Subtitle: $Component.record.Industry

    • Icon Name: standard:account

    • Is Joined: On

Result: The header updates per record — the Title shows the current Account name and the Subtitle shows its Industry.

Key Considerations

  • Dynamic bindings: Bind Caption, Title, or Subtitle to record variables or the Target Page Object for context-sensitive headers.

  • Icon selection: Use valid SLDS icon names; test for visual consistency across devices.

  • Background images: Choose high-contrast images to ensure text readability.

  • Is Joined: Toggle on when placing the Header directly above a content component to remove the visual gap.

  • Accessibility: Use clear, hierarchical text; provide Alternative Text for the help icon when used.

Troubleshooting Common Issues

  • Bindings not updating: Verify resource names (e.g., $Component.record.Name) and confirm the Target Page Object is set correctly.

  • Icon not displaying: Confirm the SLDS icon name is valid; browse the Salesforce SLDS icon library for options.

  • Background overlays text: Choose a lighter or lower-contrast image, or consider omitting the background.

  • No visual connection to content below: Ensure Is Joined is enabled and no conflicting borders exist on the parent component.

  • Static content despite bindings: Test with sample data in the canvas preview and refresh if needed.

Styling

Configure the Header's appearance from the Style tab of the Edit Header panel.

Controls the outer spacing around the header.

  • Top / Right / Bottom / Left: Adjust the space on each side.

Controls the inner spacing between the header's content and its border.

  • Top / Right / Bottom / Left: Adjust the inner spacing on each side.

Controls the header's dimensions.

  • Width / Height: Set fixed dimensions.

  • Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.

  • Overflow: Control how content that exceeds the bounds is handled.

Styles the header container.

  • Background Color: Set the header background color.

Styles the header title text.

  • Color / Font Size / Font Weight / Font Family / Line Height / Text Shadow: Set the title typography.

  • Horizontal Alignment: Align the title.

Styles the header caption text.

  • Color / Font Size / Font Weight / Font Family / Line Height / Text Shadow: Set the caption typography.

  • Horizontal Alignment: Align the caption.

Styles the header subtitle text.

  • Color / Font Size / Font Weight / Font Family / Line Height / Text Shadow: Set the subtitle typography.

  • Horizontal Alignment: Align the subtitle.

Last updated

Was this helpful?