Component Browser
BrowseBuild
Home/Browse/Timeline 20

Timeline 20

ButtonsBackground Image81 nodes ยท 33 styles
Timeline 20

Description

Horizontal timeline with left-aligned header, alternating entry positions above and below the progress line, showing dates and descriptions in a staggered layout

Detailed Analysis

This timeline uses a visually interesting staggered layout where entries alternate between appearing above and below the horizontal progress line. The header is left-aligned with tagline, heading, body text, and button group. Six date markers are connected by the progress line, with entries positioned alternately up and down, creating a wave-like visual rhythm. Each entry shows a date label and description paragraph.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

alternating timelinestaggered layouthorizontal timelinezigzag timelinedate markersprogress linemilestoneswave layoutchronologicalcompany historysix columnsvisual rhythmdynamic timelineoffset entries

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [],
      "actionLists": [],
      "interactions": []
    },
    "nodes": [
      {
        "_id": "8bda1ac4-9528-9b17-3e2a-12b6f40b5773",
        "tag": "section",
        "data": {
          "tag": "section",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "92d85a70-157a-ac2b-c6ce-7bb12d11f6db"
        ],
        "children": [
          "8bda1ac4-9528-9b17-3e2a-12b6f40b5774"
        ]
      },
      {
        "_id": "8bda1ac4-9528-9b17-3e2a-12b6f40b5774",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "b0934d9a-875a-bb42-0630-12090a77fc73"
        ],
        "children": [
          "8bda1ac4-9528-9b17-3e2a-12b6f40b5775"
        ]
      },
      {
        "_id": "8bda1ac4-9528-9b17-3e2a-12b6f40b5775",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
    
... (truncated)