Data
Timeline
semantic HTML시간 순서의 사건이나 변경 이력을 의미론적 목록으로 표시합니다.
Live example
- Review approved
- Draft updated
<ol data-standard-component="timeline" data-ui="timeline" aria-label="Activity"><li><time datetime="2026-07-14">Today</time><strong>Review approved</strong></li><li><time datetime="2026-07-13">Yesterday</time><span>Draft updated</span></li></ol>Variants and sizes
The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.
compactcomfortableroomy
Public API
| Contract | Value |
|---|---|
| Implementation | semantic HTML |
| Status | stable |
| License | free |
| Since | 0.6 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
ordered list, readable time elements and DOM order
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->