Timeline Block
Advanced Training Module 2: Advanced Design Blocks
The Timeline block allows you to present information in chronological order using a visually structured timeline. It is ideal for telling stories, highlighting milestones, documenting progress, or showing the evolution of a department, program, research project, or initiative over time.
Unlike a standard list of dates, the Timeline block provides a more engaging and easier-to-follow visual format that helps visitors understand how events relate to one another.
Common uses include:
- Department history
- Program milestones
- Research project timelines
- Strategic plans and roadmaps
- Historical achievements
- Event histories
When to Use a Timeline
Use a Timeline block when information is best understood as a sequence of events.
Examples include:
Department History
1942 - Department Founded
1968 - First Graduate Program Launched
2005 - New Research Facility OpenedStrategic Roadmap
Phase 1 - Planning
Phase 2 - Development
Phase 3 - LaunchResearch Project
Funding Awarded
Research Begins
Publication ReleasedTimelines help visitors understand progression and context in a way that standard paragraphs often cannot.
Adding a Timeline Block
To add a Timeline block:
- Click the + button and search for Timeline.
- Select the Timeline block.
- Enter a date, year, milestone, or label in the left column.
- Add a title and supporting content in the right column.
Each timeline item represents a single point in the sequence.
Creating Timeline Entries
A timeline entry typically contains three elements:
Date or Label
The left side of the timeline.
Examples:
- 2026
- September 2026
- Phase 1
- Project Launch
Dates don’t need to be actual calendar dates. Labels can also be used to represent stages or milestones.
Title
A short heading describing the event.
Examples:
- Research Facility Opens
- Program Launch
- Department Expansion
Description
Supporting information that provides additional context.
Example: The department opened a new research facility to support interdisciplinary collaboration and innovation.
Adding Additional Content
Timeline entries can contain more than paragraph text.
You may also add:
- Lists
- Buttons
- Links
- Other supported blocks
Adding Additional Timeline Items
To add another entry:
- Select the parent Timeline block.
- Click the + button within the Timeline block.
- Add the new timeline item.
- Enter the date and content.
Repeat as needed to build your timeline.
Timeline Content Tips
Not every timeline needs to cover decades of history.
Timelines can be used for:
Historical Content
Showing events that happened in the past.
Future Plans
Showing upcoming milestones and priorities.
Processes
Showing stages within a project or initiative.
Journeys
Showing how a program, service, or organization has evolved.
Best Practices
Keep Entries Consistent
Try to maintain a similar level of detail throughout the timeline.
Focus on Significant Milestones
Not every event needs to be included. Highlight the moments that matter most.
Use Clear Titles
Visitors should be able to quickly understand the significance of each entry.
Keep Descriptions Concise
Provide enough context without overwhelming readers.
Consider the Audience
Think about what information visitors will find most interesting or useful.
Common Uses
The Timeline block works particularly well for:
- Department histories
- Research timelines
- Strategic plans
- Campaign milestones
- Organizational achievements
- Historical retrospectives
Because of its visual structure, it often creates a more engaging experience than a simple chronological list.
-
The timeline block lets you organize content along a vertical timeline.
You can display dates on the left and then titles with information like a description as well as a button to click for more information.
To add a timeline block, click the block inserter at the top left and choose timeline. Once you have a block on your page, you can add the date over here on the left. And then over on the right, add your title as well as a description or further information.
Optionally you can also use a button. So let’s have a look at what that looks like on the front end. We’ll publish it and view the page. So as you can see we have one item in our timeline. But in all likelihood, as it’s a timeline you’ll probably want to add more.
So to add more you’re going to select the timeline block. Right now I’ve only got one item selected. To select the entire block I want to click this icon here. And you’ll notice that now it’s outlined in this blue color.
Click the plus sign at the bottom right and now you can add a second item below Christmas Day. Again you can add your information here as well as the optional button.
And once you’ve got that saved have a look and you’ll now see what it looks like with two items.
That is a quick rundown of the timeline block!
Try it Out
- Add a Timeline block to a page.
- Create a timeline entry with a date or milestone.
- Add a title and description.
- Add a second timeline entry.
- Add a button or list to one entry.
- Preview the page and review how the timeline presents the information.