---
schema_version: "1"
id: 745e33e804ed73ceb250ce75b85b063fc65de232ce262df0b4cf522d94265d77
title: Modal Header
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/modalHeader/lightning-modal-header.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-modal-header.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 29831058e6795a081301a0f51e997e58eb0ce69b88c047d38f8ecb351af8cfbe
products:
  - Lightning Component Reference
---
# Modal Header

**`lightning-modal-header`**

Creates a header to display the heading and tagline at the top of a modal.

**For Use In**

Lightning Experience, Standalone Lightning App

::::::tabset{tabs='[ "Develop", "Specifications"]'}

:::::tab

The `lightning-modal-header` component displays header text in a panel at the top of a modal dialog.
Use of a header is optional, but when you provide a header you must specify the header text with the `label` attribute.

If you don't use the `lightning-modal-header` component, you must set a label
in the modal you create by extending `LightningModal`. A label is required for accessibility.

The modal components render in the order they appear in the template. Place the `lightning-modal-header`
component before the `lightning-modal-body` component in the template.

`lightning-modal-header` supports optional tagline text, which displays in smaller text below the heading. Enclose the
tagline text directly in the `lightning-modal-header` component, no HTML tag or attribute is needed. You can include links with `<a>`
tags, which are the only HTML elements permitted. If the header text is too long to fit on one line, it wraps in the modal header.

This sample code shows the expected order of the modal components. The modal content is
created in a separate component extended from `LightningModal`. See
[Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/platform/lwc/guide/)

<!-- prettier-ignore-start -->
```html
<!-- my/modalDialog.html -->
<template>
    <lightning-modal-header label="My Modal">
        Tagline can be descriptive content with <a href="https://www.example.com">links</a> and can wrap to multiple lines.
    </lightning-modal-header>
    <lightning-modal-body>
        <!-- modal content specified in LightningModal component -->
    </lightning-modal-body>
</template>
```
<!-- prettier-ignore-end -->

## Component Styling

`lightning-modal-header` implements the [modals](https://v1.lightningdesignsystem.com/components/modals/) blueprint in the Salesforce Lightning Design System (SLDS).

Component styling hooks provide CSS custom properties that use the `--slds-c-*` prefix and they change styling for specific elements or properties of a component. Component styling hooks are supported for SLDS 1 only. See the [SLDS 1 component blueprints](https://v1.lightningdesignsystem.com/components/overview/) for available component styling hooks.

For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.


## Accessibility

When you use `lightning-modal-header` in your modal, the rendered modal provides an `aria-labelledby` attribute set to the ID of the header element.
If you don't use `lightning-modal-header`, the accessible label is provided using `aria-label` set to the label you provide in the modal.

When the modal opens, focus goes to the first interactive element in the modal. If the header includes a link in tagline text, the link
gets initial focus.

See [Lightning Web Components Developer Guide](https://developer.salesforce.com/docs/platform/lwc/guide/) for more information about accessibility in modals.


:::::

:::::tab
::component-specification{component="modalHeader" model="lwc" namespace="lightning"}

:::::

::::::