### File

`packages/components/eui-alert/eui-alert-title.component.ts`

### Description

Title subcomponent for eui-alert that displays a prominent heading above the alert message. Provides semantic structure and visual hierarchy within alert messages. Content is projected via ng-content, allowing text or inline elements as title content. Automatically styled to match the parent alert's variant and visual design. Must be used as a direct child of eui-alert component for proper styling and structure.

#### Alert with title

Example :

    <eui-alert euiSuccess>
      <eui-alert-title>Success</eui-alert-title>
      Your operation completed successfully.
    </eui-alert>

#### Alert with title and multiple variants

Example :

    <eui-alert euiWarning>
      <eui-alert-title>Warning</eui-alert-title>
      Please review the following issues before proceeding.
    </eui-alert>

### Accessibility

- Provides semantic structure that helps screen readers distinguish title from content
- Title is announced first, giving context before the main message
- Visual hierarchy aids users with cognitive disabilities in understanding message importance

### Notes

- Must be used within eui-alert component
- Should be placed before the main alert content
- Only one title per alert is recommended for clarity
- Title styling automatically inherits from parent alert variant
- Keep titles concise - typically 1-3 words for quick comprehension

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
host | `{ }`
selector | `eui-alert-title`

template

    <ng-content />

styleUrl | `eui-alert-title.scss`

# results matching ""

# No results matching ""