# EuiTimelineItemComponent

**Type:** component

<p>A timeline item component that represents a single event or activity within a timeline.
Can display labels, dates, times, and custom content with various visual states.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;!-- Simple timeline item --&gt;
&lt;eui-timeline-item
  label=&quot;Task Completed&quot;
  date=&quot;March 15, 2024&quot;
  time=&quot;14:30&quot;
  euiSuccess /&gt;

&lt;!-- With sublabel and custom content --&gt;
&lt;eui-timeline-item
  label=&quot;Code Review&quot;
  subLabel=&quot;Pull request #123&quot;
  date=&quot;Today&quot;
  euiInfo&gt;
  &lt;p&gt;Reviewed changes and approved merge&lt;/p&gt;
&lt;/eui-timeline-item&gt;

&lt;!-- Group item --&gt;
&lt;eui-timeline-item
  label=&quot;Multiple Events&quot;
  [isGroup]=&quot;true&quot;
  euiSecondary /&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Provide meaningful labels describing the event</li>
<li>Use semantic color variants (euiSuccess, euiWarning, euiDanger) consistently</li>
<li>Ensure date/time formats are clear and localized</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Color variants (euiSuccess, euiInfo, euiWarning, euiDanger) indicate event status</li>
<li>isGroup mode changes visual appearance for grouped events</li>
<li>Alignment is inherited from parent eui-timeline component</li>
<li>Custom content can be projected via ng-content</li>
</ul>


**Selector:** `eui-timeline-item`

**Standalone:** false

## Inputs

- **date**: `string` - 
- **dateStyleClass**: `string` - 
- **e2eAttr**: `string` - 
- **isGroup**: `boolean` - 
- **isLeftAligned**: `boolean` - 
- **label**: `string` - 
- **subLabel**: `string` - 
- **time**: `string` - 
- **timeStyleClass**: `string` - 
