Timeline 6 - Sticky headline with icon-led step list

Pro

A two-column timeline with a sticky multi-line headline on the left and a vertical list of six icon-led steps with titles and descriptions on the right.

Vue
Shadcn Timeline 6 block

Component Data

  • ID:timeline6
  • Access:pro
  • Created:Jan 20, 2025
  • Type:block

Timeline 6 block design & features

Timeline6 is a two-column timeline built with Shadcn UI. The left column pins a large three-line headline, with the last word ("superpower") in muted type. The right column is a vertical list of six steps. Each step has a large outline icon, a bold title, and a muted description, separated by a bottom hairline. Sample titles include Boost Productivity, Minimize Errors, Enhance Collaboration, Scale Seamlessly, Track Progress, and Save Time.

Type leads on the left and sits denser on the right. Icons are large, thin-stroke, and sit beside the copy. Rows use generous vertical padding and a simple bottom hairline. Titles use the primary color above muted body copy. The section is static.

The mood is product-marketing and slightly editorial: a sticky slogan next to a long benefit list. It is a common sticky-scroll pattern without much decoration. Complexity is low and content-driven: one headline plus six icon, title, and description pairs.

On large screens the headline stays put while the list scrolls. On smaller screens the columns stack and the heading scrolls with the page.