# EuiAlertTitleComponent

**Type:** component

<p>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&#39;s variant and visual design.
Must be used as a direct child of eui-alert component for proper styling and structure.</p>
<h4>Alert with title</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-alert euiSuccess&gt;
  &lt;eui-alert-title&gt;Success&lt;/eui-alert-title&gt;
  Your operation completed successfully.
&lt;/eui-alert&gt;</code></pre></div><h4>Alert with title and multiple variants</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-alert euiWarning&gt;
  &lt;eui-alert-title&gt;Warning&lt;/eui-alert-title&gt;
  Please review the following issues before proceeding.
&lt;/eui-alert&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Provides semantic structure that helps screen readers distinguish title from content</li>
<li>Title is announced first, giving context before the main message</li>
<li>Visual hierarchy aids users with cognitive disabilities in understanding message importance</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must be used within eui-alert component</li>
<li>Should be placed before the main alert content</li>
<li>Only one title per alert is recommended for clarity</li>
<li>Title styling automatically inherits from parent alert variant</li>
<li>Keep titles concise - typically 1-3 words for quick comprehension</li>
</ul>


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

**Standalone:** false
