Timeline Lima

overview

A vertical timeline featuring all dates to the left and content on the right.

Available for:

Figma

Bricks

Gutenberg

Buy Frames

Back to library

Overview

Timeline Lima features a timeline with dates to the left, title and description to the right, a center timeline bar, and marker icons.

On mobile, the cards collapse so the timeline bar is on the left and all content is on the right. The marker perfectly aligns with the date badge on mobile.

This timeline frame is built with advanced CSS Grid techniques, but is very easy to use and customize.

Variables

This frame uses the following locally scoped variables to make it easier for you to edit the style or behavior of this frame. Variables can be viewed or edited from the CSS tab.

--timeline-gap

Controls the space between timeline entries.

--timeline-content-gap

Controls the space between elements inside a timeline entry.

--center-line-color

Sets the color of the vertical center line.

--center-line-width

Sets the width of the vertical center line.

HTML5 Tags & Attributes

time

datetime

Accessibility Notes

If you decide to link timeline entries to a URL, we recommend turning the timeline entry headings into a link and using the clickable parent technique to ensure proper accessibility.

Related Frames

Timeline Section Lima

FAQs

Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.