# EuiAlertTitleComponent

**Type:** component



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
```html
<eui-alert euiSuccess>
  <eui-alert-title>Success</eui-alert-title>
  Your operation completed successfully.
</eui-alert>
```

#### Alert with title and multiple variants
```html
<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


**Selector:** `eui-alert-title`