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

selector | `eui-alert-title`
template |
    <ng-content />
styleUrl | `eui-alert-title.scss`

### Index

###### Properties
class
###### HostBindings
class

### HostBindings

class
Type : `string`
Default value : `'eui-alert-title'`
Computes and returns the CSS classes for the label title component based on its current state.

### Properties

class
Type : `string`
Default value : `'eui-alert-title'`
Decorators : `@HostBinding('class')`
Computes and returns the CSS classes for the label title component based on its current state.

# results matching ""

# No results matching ""