Timeline Section Lima

overview

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

Style Preview

Available for:

Figma

Bricks

Gutenberg

Buy Frames

Back to library

Overview

Timeline Section Lima is a vertical timeline section with a centered introduction.

The main child frame – 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.

Query Loop Compatible

Frame Created on January 18, 2023

Frame Last Updated on November 12, 2023

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

--timeline-content-gap

--center-line-color

--center-line-width

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.

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.