Content 28

ImageButtonsBackground ImageList114 nodes · 42 styles

Description

Main article content on left with table of contents navigation on right

Detailed Analysis

This layout mirrors Content 27 but with reversed column positions. The main article content occupies the left column with headings, paragraphs, and an image placeholder. The right column contains the sticky table of contents with linked section titles for navigation. This alternative arrangement may suit different reading preferences or design requirements. Both layouts support long-form content with easy section access.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

table of contentsdocumentationarticle layoutsticky navigationtwo columnlong form contentsection linkscontent navigationsidebar rightmain contentarticle structuretoc rightscrollable contentdocumentation layout

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [
        {
          "id": "e-1832",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "delay": 0,
              "easing": "",
              "duration": 0,
              "actionListId": "a-476",
              "playInReverse": false,
              "autoStopEventId": "e-1833",
              "affectedElements": {}
            },
            "instant": true,
            "actionTypeId": "GENERAL_START_ACTION"
          },
          "config": {
            "loop": false,
            "delay": null,
            "effectIn": null,
            "direction": null,
            "playInReverse": false,
            "scrollOffsetUnit": null,
            "scrollOffsetValue": null
          },
          "target": {
            "id": "6540ac58fa7ea7efe56967eb|a410689d-6d22-351f-a5be-7bc0c34c76f6",
            "appliesTo": "ELEMENT",
            "styleBlockIds": []
          },
          "targets": [
            {
              "id": "6540ac58fa7ea7efe56967eb|a410689d-6d22-351f-a5be-7bc0c34c76f6",
              "appliesTo": "ELEMENT",
              "styleBlockIds": []
            }
          ],
          "createdOn": 1678338501015,
          "eventTypeId": "MOUSE_CLICK",
          "mediaQueries": [
            "main"
          ],
          "animationType": "preset"
        },
        {
          "id": "e-1833",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "delay": 0,
              "easing": "",
              "duration": 0,
              "actionListId": "a-477",
              "playInReverse": false,
              "autoStopEventId": "e-1832",
              "affectedElements": {}
            },
            "instant": true,
  
... (truncated)

Detailed Analysis

{ "meta": { "droppedLinks": 0, "dynBindRemovedCount": 0, "unlinkedSymbolCount": 0, "paginationRemovedCount": 0, "dynListBindRemovedCount": 0 }, "type": "@webflow/XscpData", "payload": { "ix1": [], "ix2": { "events": [ { "id": "e-1832", "name": "", "action": { "id": "", "config": { "delay": 0, "easing": "", "duration": 0, "actionListId": "a-476", "playInReverse": false, "autoStopEventId": "e-1833", "affectedElements": {} }, "instant": true, "actionTypeId": "GENERAL_START_ACTION" }, "config": { "loop": false, "delay": null, "effectIn": null, "direction": null, "playInReverse": false, "scrollOffsetUnit": null, "scrollOffsetValue": null }, "target": { "id": "6540ac58fa7ea7efe56967eb|a410689d-6d22-351f-a5be-7bc0c34c76f6", "appliesTo": "ELEMENT", "styleBlockIds": [] }, "targets": [ { "id": "6540ac58fa7ea7efe56967eb|a410689d-6d22-351f-a5be-7bc0c34c76f6", "appliesTo": "ELEMENT", "styleBlockIds": [] } ], "createdOn": 1678338501015, "eventTypeId": "MOUSE_CLICK", "mediaQueries": [ "main" ], "animationType": "preset" }, { "id": "e-1833", "name": "", "action": { "id": "", "config": { "delay": 0, "easing": "", "duration": 0, "actionListId": "a-477", "playInReverse": false, "autoStopEventId": "e-1832", "affectedElements": {} }, "instant": true, ... (truncated)