Timeline
The Timeline element displays a vertical sequence of dated entries along a connecting line. Each entry has a colored dot, date, title, and description.
Features
- Vertical timeline with connecting line
- Color-coded dots per entry
- Left or alternating layout
- Icons from MDI library on each entry
- Date labels for chronological context
- Configurable dot size and line color
Settings
| Setting | Description | Default |
|---|---|---|
| Layout | Entry arrangement: left (all on one side) or alternating | left |
| Line Color | Color of the vertical connecting line | #e0e0e0 |
| Dot Size | Diameter of timeline dots in pixels | 12 |
| Show Dates | Display date label on each entry | true |
| Show Icons | Display MDI icon inside each dot | true |
Entries
Each timeline entry has:
- Title — entry heading
- Date — date string (YYYY-MM-DD)
- Description — brief text
- Color — dot and accent color
- Icon — MDI icon class (e.g., "mdi-rocket-launch")
Click + Add Entry to add entries. Click x to remove.
Use Cases
- Project milestones and roadmaps
- Company history / About pages
- Order tracking and delivery status
- Process or workflow visualization
- Activity logs and audit trails
Styling
The Timeline supports standard Container color and dimension settings:
- Background color, border, padding, margin
- Border radius and width
Questions?
If you have any questions, please don't hesitate to contact us. Alternatively, you can submit an issue on this platform.