Timeline
Description
The Timeline component is a versatile and visually appealing way to present a sequence of events or items in chronological order. It creates a vertical list of timeline items, each with customizable content, titles, dates, and optional badges. This component is ideal for displaying project histories, personal achievements, or any series of events that benefit from a chronological presentation.
Installation
bash
sabaccui add timeline
Usage
Here's an example of how to use the Timeline component in a Storyblok block:
Preview
Project Kickoff
Starta year ago
Initial project meeting and scope definition.
Design Phase
a year ago
UI/UX design and prototyping.
Development Milestone
Milestone10 months ago
Completed core functionality.
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
items | bloks | An array of timeline items. Only accepts components of type timelineItem. | [] |
Notes
- The Timeline component uses a nested structure, with each item represented by a
timelineItemcomponent. - The component automatically adds visual elements like connecting lines and icon markers to create the timeline effect.
- Badge colors are dynamically applied based on the
badgeColorproperty of each timeline item.
Best Practices
- Use consistent date formats across all timeline items for better readability.
- Keep content concise for each timeline item to maintain a clean, scannable layout.
- Utilize badges to highlight important events or milestones within the timeline.
- Consider the overall narrative when organizing timeline items to tell a coherent story.
- For long timelines, consider implementing pagination or lazy loading to improve performance.