Timeline 10

ButtonsBackground ImageList139 nodes · 48 styles

Description

Centered alternating timeline with bordered card entries on left and right sides, header section with tagline, and card containers with dates, headings, descriptions, and buttons

Detailed Analysis

This timeline combines the alternating left-right layout with bordered card containers for each entry. The centered header includes tagline, heading, paragraph, and button group. Timeline entries alternate sides with each wrapped in a bordered card containing date heading, subheading, body text, and button pair. Dot markers on the central vertical line connect to each card. The card styling provides clear visual separation for content-rich timelines.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

alternating timelinecard timelinebordered cardszigzag layoutcentered timelinemilestoneschronologicaldate markerscompany historyevents sectioncontent cardsbuttonstagline headerhistory

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [
        {
          "id": "e-3434",
          "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|b8955c0b-a20a-1e7e-fbee-b9ca9c5eba34",
            "appliesTo": "CLASS",
            "styleBlockIds": [
              "8e253617-f60e-522e-17f4-975027a09cdf"
            ]
          },
          "targets": [
            {
              "id": "65e1215e005c55ebd076fa03|b8955c0b-a20a-1e7e-fbee-b9ca9c5eba34",
              "appliesTo": "CLASS",
              "styleBlockIds": [
                "8e253617-f60e-522e-17f4-975027a09cdf"
              ]
            }
          ],
          "createdOn": 1709650359804,
          "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-3434", "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|b8955c0b-a20a-1e7e-fbee-b9ca9c5eba34", "appliesTo": "CLASS", "styleBlockIds": [ "8e253617-f60e-522e-17f4-975027a09cdf" ] }, "targets": [ { "id": "65e1215e005c55ebd076fa03|b8955c0b-a20a-1e7e-fbee-b9ca9c5eba34", "appliesTo": "CLASS", "styleBlockIds": [ "8e253617-f60e-522e-17f4-975027a09cdf" ] } ], "createdOn": 1709650359804, "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)