Timeline 12

ImageButtonsBackground ImageList151 nodes · 51 styles

Description

Centered timeline with right-aligned bordered card entries containing dates, headings, descriptions, buttons, and attached image placeholders within each card

Detailed Analysis

This timeline combines a centered header with right-aligned bordered card entries. The vertical line with dot markers runs along the left edge of each card. Each bordered card contains a date heading, subheading, body text, and button pair, with a large image placeholder attached below the card content. The card styling creates clear visual containers for each timeline entry while maintaining the linear progression.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

timeline cardsbordered entriesvertical timelineimage cardsmilestoneschronologicaldate markerscompany historyevents sectionmedia timelinecontent cardsbuttonstagline headervisual history

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [
        {
          "id": "e-3436",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "actionListId": "a-686",
              "affectedElements": {}
            },
            "instant": true,
            "actionTypeId": "GENERAL_CONTINUOUS_ACTION"
          },
          "config": [
            {
              "smoothing": 50,
              "addEndOffset": false,
              "startsExiting": false,
              "addOffsetValue": 50,
              "addStartOffset": false,
              "endOffsetValue": 50,
              "startsEntering": true,
              "continuousParameterGroupId": "a-686-p"
            }
          ],
          "target": {
            "id": "65e1215e005c55ebd076fa03|76d93f32-2a0d-333e-6d92-d71f53d509dc",
            "appliesTo": "CLASS",
            "styleBlockIds": [
              "12afb58c-8f88-194a-9a63-7b14d7868092"
            ]
          },
          "targets": [
            {
              "id": "65e1215e005c55ebd076fa03|76d93f32-2a0d-333e-6d92-d71f53d509dc",
              "appliesTo": "CLASS",
              "styleBlockIds": [
                "12afb58c-8f88-194a-9a63-7b14d7868092"
              ]
            }
          ],
          "createdOn": 1709650448872,
          "eventTypeId": "SCROLLING_IN_VIEW",
          "mediaQueries": [
            "main",
            "medium",
            "small",
            "tiny"
          ],
          "animationType": "custom"
        }
      ],
      "actionLists": [
        {
          "id": "a-686",
          "title": "Timeline Circle [Scroll]",
          "createdOn": 1709627079937,
          "continuousParameterGroups": [
            {
              "id": "a-686-p",
              "type": "
... (truncated)

Detailed Analysis

{ "meta": { "droppedLinks": 0, "dynBindRemovedCount": 0, "unlinkedSymbolCount": 0, "paginationRemovedCount": 0, "dynListBindRemovedCount": 0 }, "type": "@webflow/XscpData", "payload": { "ix1": [], "ix2": { "events": [ { "id": "e-3436", "name": "", "action": { "id": "", "config": { "actionListId": "a-686", "affectedElements": {} }, "instant": true, "actionTypeId": "GENERAL_CONTINUOUS_ACTION" }, "config": [ { "smoothing": 50, "addEndOffset": false, "startsExiting": false, "addOffsetValue": 50, "addStartOffset": false, "endOffsetValue": 50, "startsEntering": true, "continuousParameterGroupId": "a-686-p" } ], "target": { "id": "65e1215e005c55ebd076fa03|76d93f32-2a0d-333e-6d92-d71f53d509dc", "appliesTo": "CLASS", "styleBlockIds": [ "12afb58c-8f88-194a-9a63-7b14d7868092" ] }, "targets": [ { "id": "65e1215e005c55ebd076fa03|76d93f32-2a0d-333e-6d92-d71f53d509dc", "appliesTo": "CLASS", "styleBlockIds": [ "12afb58c-8f88-194a-9a63-7b14d7868092" ] } ], "createdOn": 1709650448872, "eventTypeId": "SCROLLING_IN_VIEW", "mediaQueries": [ "main", "medium", "small", "tiny" ], "animationType": "custom" } ], "actionLists": [ { "id": "a-686", "title": "Timeline Circle [Scroll]", "createdOn": 1709627079937, "continuousParameterGroups": [ { "id": "a-686-p", "type": " ... (truncated)