# EuiTimelineComponent

**Type:** component

<p>A timeline component that displays a vertical list of events or activities in chronological order.
Can be configured to align items on the left side instead of centered.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-timeline&gt;
  &lt;eui-timeline-item
    label=&quot;Project Started&quot;
    date=&quot;Jan 15, 2024&quot;
    time=&quot;09:00&quot;
    euiSuccess&gt;
  &lt;/eui-timeline-item&gt;
  &lt;eui-timeline-item
    label=&quot;Milestone Reached&quot;
    date=&quot;Feb 20, 2024&quot;
    euiInfo&gt;
  &lt;/eui-timeline-item&gt;
&lt;/eui-timeline&gt;

&lt;!-- Left-aligned timeline --&gt;
&lt;eui-timeline [isLeftAligned]=&quot;true&quot;&gt;
  &lt;eui-timeline-item label=&quot;Event 1&quot; /&gt;
  &lt;eui-timeline-item label=&quot;Event 2&quot; /&gt;
&lt;/eui-timeline&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Use semantic HTML structure with proper heading levels</li>
<li>Provide clear, descriptive labels for each timeline item</li>
<li>Consider using aria-label on timeline for screen readers</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Default layout centers items with connecting line</li>
<li>Left-aligned mode places all items on the left side</li>
<li>Timeline items inherit alignment from parent timeline</li>
</ul>


**Selector:** `eui-timeline`

**Standalone:** false

## Inputs

- **e2eAttr**: `string` - 
- **isLeftAligned**: `boolean` - 
