Timeline 8

ImageButtonsBackground ImageList147 nodes · 48 styles

Description

Vertical timeline with header section and card-styled timeline entries featuring date labels, headings, descriptions, buttons, and images within bordered containers

Detailed Analysis

This timeline variant presents entries inside bordered card containers connected by a vertical line with dot markers. The header section includes tagline, heading, paragraph, and button group. Each timeline card contains a date heading, subheading, body text, and dual buttons, with an attached image placeholder below. The card styling adds visual separation between entries, making it ideal for detailed event descriptions or portfolio timelines.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

timeline cardsvertical timelinebordered cardsmilestonescard layoutchronologicaldate markerscompany historyevents sectionimage cardsbuttonscontent cardstagline headerprogress timeline

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [
        {
          "id": "e-3432",
          "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|3c671dcb-a65b-0e20-22ac-de5e6f3e471c",
            "appliesTo": "CLASS",
            "styleBlockIds": [
              "fac98229-882e-558a-36f9-60c6352f4647"
            ]
          },
          "targets": [
            {
              "id": "65e1215e005c55ebd076fa03|3c671dcb-a65b-0e20-22ac-de5e6f3e471c",
              "appliesTo": "CLASS",
              "styleBlockIds": [
                "fac98229-882e-558a-36f9-60c6352f4647"
              ]
            }
          ],
          "createdOn": 1709650336511,
          "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-3432", "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|3c671dcb-a65b-0e20-22ac-de5e6f3e471c", "appliesTo": "CLASS", "styleBlockIds": [ "fac98229-882e-558a-36f9-60c6352f4647" ] }, "targets": [ { "id": "65e1215e005c55ebd076fa03|3c671dcb-a65b-0e20-22ac-de5e6f3e471c", "appliesTo": "CLASS", "styleBlockIds": [ "fac98229-882e-558a-36f9-60c6352f4647" ] } ], "createdOn": 1709650336511, "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)