Timeline Alpha

overview

An alternating timeline with a conventional pipe and icon indicators.

Style Preview
Timeline Alpha
Timeline Alpha Styled
Available for:
Figma
Bricks
Gutenberg
Buy Frames
Back to library

Overview

Timelines are fairly complex to build, especially when you consider things like proper semantic HTML, mobile responsiveness, maintainability, and query loop compatibility.

Toss in an alternating design and things get even trickier.

Thankfully, you don’t have to worry about any of that with Frames. It’s all done for you via Timeline Section Alpha.

This alternating timeline section features a typical pipe design with icon indicators. These icons are easy to style or even swap for custom icons.

Timeline items can support any type of content, including images, and can be presented in a boxed or unboxed style.

The timeline stacks elegantly on mobile with the pipe and icons all left aligned and the timeline items sitting next to them.

The entire frame is surprisingly easy to edit and will save you hours of time over trying to build a timeline yourself.

Query Loop Compatible

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

Space between timeline items.

--center-line-color

Color of the timeline pipe.

--center-line-width

Thickness of the timeline pipe.

HTML5 Tags & Attributes

Accessibility Notes

If you want to make the timeline items clickable, we recommend adding your hyperlink to the heading of each timeline item and then using the clickable parent technique.

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.