Close Menu
  1. Timeline

Timeline

Timeline block on the frontend.

An attractive way to display chronological events or milestones.

Usage

Timeline is a parent block that holds a single type of child card. Because there is only a single type of block the Timeline parent can hold, clicking on the + inserter will automatically add a new entry to the timeline. The timeline bar takes it color from your site’s primary color, which can be adjusted in the customizer. There are no parent block settings.

You can drag around your entries to reorder them in the timeline. Take note, the timeline is not automatically ordered by date. We wanted to provide enough flexibility for you to use something other than dates as the entry keys, which means that it’s up to your to keep your entries in order.

On desktop, your entries will automatically alternate alignment, even cards on the left and odd cards on the right.

Entries

Each entry in the timeline has a Headline rendered as an <h3>, a Date rendered as an <h4>, and its Body as a <p> tag. All of these fields can be edited inline—just click into them and begin typing. Take note, this includes the Date located on the opposite side of the timeline from the body of the entry.

Tip

Look, we know this block is named Timeline, but you can use this to display any sort of key/value content you’d like. The Date field is entirely freeform, and doesn’t have to be a date at all! If you have a favorite use for this block that we haven’t thought of yet, let us know!

Timeline card fields in the block editor.

Settings

When an entry is selected, you can add a Link or an Image to each. If an entry has a link, an additional Style field will appear to let you choose whether the link should be displayed as a <button> or an <understated> link.

The Link Text defaults to ‘Learn More’. You can click on the link to edit its text.

The image will be displayed as a small circle, so be sure to choose an image that looks good at a small size and that doesn’t get any important features cut off.

Add an entry to your timeline.

Adding Entries

To add an entry to your Timeline block, click on the + icon that appears under the block when it is focused.

Timeline