> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/lwc-components/core-components/header.md).

# 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.

```html
<!-- 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.

```html
<!-- 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 <support@avonni.app> for assistance.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/lwc-components/core-components/header.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.