Component Browser
BrowseBuild
Home/Browse/Timeline 21

Timeline 21

ImageButtonsBackground Image86 nodes ยท 34 styles
Timeline 21

Description

Horizontal timeline with left-aligned header, alternating positions with image placeholders above and below the progress line alongside dates and descriptions

Detailed Analysis

This timeline extends the staggered layout concept by adding image placeholders to each entry. Entries alternate between positioning above and below the horizontal progress line, each featuring an image placeholder, date label, and description. The left-aligned header includes tagline, heading, body text, and buttons. Six entries create a visually dynamic wave pattern with rich media support for each milestone.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

alternating timelineimage timelinestaggered layouthorizontal timelinezigzag timelineimage cardsdate markersprogress linemilestoneswave layoutmedia timelinevisual historydynamic timelinephoto timeline

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": "a41fdf68-9b93-f8b4-9d81-9bd85e6fbcb6",
        "tag": "section",
        "data": {
          "tag": "section",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "06ff54b1-b1a9-a1aa-248e-1dc1fee75101"
        ],
        "children": [
          "a41fdf68-9b93-f8b4-9d81-9bd85e6fbcb7"
        ]
      },
      {
        "_id": "a41fdf68-9b93-f8b4-9d81-9bd85e6fbcb7",
        "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": [
          "a41fdf68-9b93-f8b4-9d81-9bd85e6fbcb8"
        ]
      },
      {
        "_id": "a41fdf68-9b93-f8b4-9d81-9bd85e6fbcb8",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
    
... (truncated)