## Timeline
### Semantic Parts
- root（`semantic-mark-root`）: Root element with timeline container list style reset, vertical layout, dot icon, outlined style, alternate layout and other basic container styles
- item（`semantic-mark-item`）: Item element with single timeline node relative positioning, margin, padding, font size, finish state, color theme, layout direction and other node basic styles
- itemWrapper（`semantic-mark-itemWrapper`）: Item wrapper element with timeline node content wrapping container styles
- itemIcon（`semantic-mark-itemIcon`）: Item icon element with node head icon absolute positioning, width/height size, background color, border, border radius, wave animation and other icon styles
- itemHeader（`semantic-mark-itemHeader`）: Item header element with header area layout containing title and rail, alignment, text direction and other styles
- itemTitle（`semantic-mark-itemTitle`）: Item title element with node title text font size, line height, color and other text styles
- itemSection（`semantic-mark-itemSection`）: Item section element with section container containing header and content flex layout, wrap, gap and other layout styles
- itemContent（`semantic-mark-itemContent`）: Item content element with node detail content relative positioning, top offset, left margin, text color, word break and other content styles
- itemRail（`semantic-mark-itemRail`）: Item rail element with timeline node connection track line absolute positioning, top offset, left offset, height, border color, width, style and other connection line styles
### Usage Example
```tsx
```
### Abstract DOM Structure
```html