# EuiTimelineItemComponent

**Type:** component



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.

### Basic Usage
```html
<!-- Simple timeline item -->
<eui-timeline-item
  label="Task Completed"
  date="March 15, 2024"
  time="14:30"
  euiSuccess />

<!-- With sublabel and custom content -->
<eui-timeline-item
  label="Code Review"
  subLabel="Pull request #123"
  date="Today"
  euiInfo>
  <p>Reviewed changes and approved merge</p>
</eui-timeline-item>

<!-- Group item -->
<eui-timeline-item
  label="Multiple Events"
  [isGroup]="true"
  euiSecondary />
```

### Accessibility
- Provide meaningful labels describing the event
- Use semantic color variants (euiSuccess, euiWarning, euiDanger) consistently
- Ensure date/time formats are clear and localized

### Notes
- Color variants (euiSuccess, euiInfo, euiWarning, euiDanger) indicate event status
- isGroup mode changes visual appearance for grouped events
- Alignment is inherited from parent eui-timeline component
- Custom content can be projected via ng-content


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

## Inputs
- **date**: `string` - 
- **dateStyleClass**: `string` - 
- **e2eAttr**: `string` - 
- **isGroup**: `boolean` - Changes the visual appearance accordingly
- **isLeftAligned**: `boolean` - Inherited from parent timeline component
- **label**: `string` - 
- **subLabel**: `string` - 
- **time**: `string` - 
- **timeStyleClass**: `string` - 
- **euiSecondary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSuccess**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiInfo**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiWarning**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]