Component Browser
BrowseBuild
Home/Browse/Content 27

Content 27

ImageButtonsBackground ImageList114 nodes · 42 styles
Content 27

Description

Table of contents navigation on left with main article content on right

Detailed Analysis

This layout features a two-column documentation or article structure. The left column contains a sticky table of contents with a 'Table of contents' heading followed by linked section titles for easy navigation. The right column holds the main content area with headings, paragraphs, and an image placeholder. This pattern is ideal for long-form content requiring easy section navigation. The TOC likely remains visible while scrolling the main content.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

table of contentsdocumentationarticle layoutsticky navigationtwo columnlong form contentsection linkscontent navigationsidebar navmain contentarticle structuretoc leftscrollable 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-1824",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "delay": 0,
              "easing": "",
              "duration": 0,
              "actionListId": "a-474",
              "playInReverse": false,
              "autoStopEventId": "e-1825",
              "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|65f62486-8edd-15db-2153-1b0504cf6281",
            "appliesTo": "ELEMENT",
            "styleBlockIds": []
          },
          "targets": [
            {
              "id": "6540ac58fa7ea7efe56967eb|65f62486-8edd-15db-2153-1b0504cf6281",
              "appliesTo": "CLASS",
              "styleBlockIds": [
                "fcb6d91b-4eae-1177-be29-caae1d873232"
              ]
            }
          ],
          "createdOn": 1678096386173,
          "eventTypeId": "MOUSE_CLICK",
          "mediaQueries": [
            "main"
          ],
          "animationType": "custom"
        },
        {
          "id": "e-1825",
          "name": "",
          "action": {
            "id": "",
            "config": {
              "delay": 0,
              "easing": "",
              "duration": 0,
              "actionListId": "a-475",
              "playInReverse": false,
              "autoStopEventId": "e-1824",
              "
... (truncated)