Header

avonni-header

A page header that displays a title, details, icon and actions at the top of a page or region.

Overview

Header is a Lightning Web Component that renders a page header with an icon, label, title, info line, and slots for actions, controls, and detail blocks.

Use it in your own Lightning Web Components to give custom pages and records a consistent, SLDS-styled header. You control the icon, the label/title/info text, and the layout variant through attributes, and you compose actions, controls, and detail fields through named slots.

Use Cases

• Record pages: Show the object label, record name, and last-updated info.
• Object home pages: Title a list view with an icon and a primary action menu.
• Detail headers: Surface key fields in a detail block beneath the title.
• Toolbars: Place buttons and controls alongside the title.
• Stacked layouts: Use is-joined to sit the header flush on top of content.

---

Variant Guidelines

Variant	Use Case
base	Generic section or page header.
object-home	List view / object home pages.
record-home	Record detail pages with detail blocks.
record-home-vertical	Record headers in narrow / vertical layouts.

---

Use Case Examples

Example 1: Record header with actions and details

Scenario: Build a record page header with the object label, record name, action buttons, and a row of detail fields.

<!-- recordHeader.html -->
<template>
    <avonni-header
        icon-name="standard:account"
        label="Account"
        title="Acme Corporation"
        info="Updated 3 minutes ago"
        variant="record-home"
    >
        <lightning-button-group slot="actions">
            <lightning-button label="Edit" icon-name="utility:edit"></lightning-button>
            <lightning-button label="Follow" icon-name="utility:favorite"></lightning-button>
        </lightning-button-group>

        <ul slot="details" class="slds-page-header__detail-block">
            <li class="slds-page-header__detail-item">
                <p class="slds-text-title slds-truncate">Industry</p>
                <p class="slds-text-body_regular slds-truncate">Technology</p>
            </li>
        </ul>
    </avonni-header>
</template>

Result: A record-home header with the account icon, label, name, info line, edit/follow buttons, and an industry detail field.

Example 2: Object home header with an action menu

Scenario: Title a list view and offer a "New" menu in the actions slot.

<!-- contactsHeader.html -->
<template>
    <avonni-header
        icon-name="standard:contact"
        label="Contacts"
        title="My Contacts"
        info="32 items"
        variant="object-home"
    >
        <lightning-button-menu slot="actions" alternative-text="Show menu">
            <lightning-menu-item value="new" label="New Contact"></lightning-menu-item>
            <lightning-menu-item value="import" label="Import"></lightning-menu-item>
        </lightning-button-menu>
    </avonni-header>
</template>

Result: An object-home header showing the contacts icon, title, item count, and a button menu for creating or importing records.

---

Specifications

Attributes

Name	Description	Type	Default	Required
icon-name	The Lightning Design System name of the icon. Specify the name in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed. The icon is displayed in the header before the title.	String	—
info	Text to display below the title. To include additional markup or another component, use the info slot.	String	"base"
is-joined	If present, the bottom border-radius is set to zero and the shadow is removed. This allows the page-header to sit flush on top of another element.	Boolean	false
label	Label to display above the title. To include additional markup or another component, use the label slot.	String	—
title	Title of the page header. To include additional markup or another component, use the title slot.	String	—
variant	The type of component. Valid values include base, object-home, record-home and record-home-vertical.	String	"base"

Slots

Slot	Description
title	Placeholder for the page header title. The title is displayed at the top of the page header, next to the icon. Alternatively, use the title attribute if you don't need to pass in extra markup in your title.
label	Placeholder for the page header label. The label is displayed at the top of the page header, next to the icon. Alternatively, use the label attribute if you don't need to pass in extra markup in your label.
actions	Placeholder for actionable components, such as lightning-button or lightning-button-menu.
details	Placeholder for the page header details.
info	Placeholder for the page header info. Alternatively, use the info attribute if you don't need to pass in extra markup in your info.
controls	Placeholder for the page header controls.

Styling Hooks

CSS Variable	Type	Default
--avonni-page-header-base-header-color-background	color	#f3f2f2
--avonni-page-header-object-home-header-color-background	color	#f3f2f2
--avonni-page-header-record-home-header-color-background	color	#f3f2f2
--avonni-page-header-icon-radius-border	sizing	—
--avonni-page-header-base-icon-color-background	color	—
--avonni-page-header-base-icon-color-foreground	color	—
--avonni-page-header-object-home-icon-color-background	color	—
--avonni-page-header-object-home-icon-color-foreground	color	—
--avonni-page-header-record-home-vertical-icon-color-background	color	—
--avonni-page-header-record-home-vertical-icon-color-foreground	color	—
--avonni-page-header-record-home-icon-color-background	color	—
--avonni-page-header-record-home-icon-color-foreground	color	—

Key Considerations

• Attribute vs. slot: Use title/label/info attributes for plain text; use the matching slots when you need extra markup or components.
• Variant fit: Detail blocks are intended for the record-home variants.
• Joined headers: is-joined removes the shadow and bottom radius so the header can stack flush on top of a card or table.
• Icon format: icon-name uses the SLDS category:name format (e.g. standard:account).
• Best Practice: Use the variant that matches the page type (record-home for records, object-home for list views) and provide an icon-name for quick visual recognition.

---

Troubleshooting Common Issues

• Icon not showing: Verify icon-name is a valid SLDS name in category:name format.
• Actions not appearing: Confirm the actionable markup uses slot="actions".
• Details misaligned: Wrap detail items in the SLDS detail-block markup and place them in slot="details" with a record-home variant.
• If issues persist: Contact our support team at [email protected] for assistance.