Article

Creating a Sidebar

Create a box with an HTML bulleted list in the margin.

Overview

Placing supplemental or reference information in the margin of your article can create an informative and engaging experience.

On this page, you’ll learn how to create a sidebar that contains some HTML formatting.

Create Component Layout Objects for the Sidebar

The ComponentLayout object called sidebarLayout specifies that the sidebar will begin in column 7 of the article layout and span three columns. The other ComponentLayout object makes a minor adjustment.

  1. Copy the example code Sidebar Layout Objects: Copy This Code.

  2. Paste the code between the closing brace (}) of the last ComponentLayout object and the closing brace for the whole componentLayouts property.

Your code should look like the example code Sidebar Layout Objects: Result.

Sidebar Layout Objects: Copy This Code

,
    "sidebarLayout": {
      "contentInset": {
        "left": true,
        "right": true
      },
      "columnStart": 14,
      "columnSpan": 6,
      "margin": {
        "top": 24
      }
    },
    "fullMarginBelowContainedLayout": {
      "margin": {
        "bottom": 24
      }
    }

Sidebar Layout Objects: Result

Ellipses (...) indicate lines of code that have been omitted from this example.

{
  ...
  "componentLayouts": {
    ...
    "sidebarLayout": {
      "contentInset": {
        "left": true,
        "right": true
      },
      "columnStart": 14,
      "columnSpan": 6,
      "margin": {
        "top": 24
      }
    },
    "fullMarginBelowContainedLayout": {
      "margin": {
        "bottom": 24
      }
    }
  },
  ...
}

Define a Component Style Object for the Sidebar

Before you can apply a background color to the sidebar, you must define a new ComponentStyle object for the sidebar background color.

  1. Copy the example code sidebarBackgroundStyle: Copy This Code.

  2. Paste the code between the closing brace (}) of the last ComponentStyle object and the closing brace for the whole componentStyles property.

Your code should look like the example code sidebarBackgroundStyle: Result.

sidebarBackgroundStyle: Copy This Code

,
    "sidebarBackgroundStyle": {
      "backgroundColor": "#EAF1F4"
    }

sidebarBackgroundStyle: Result

Ellipses (...) indicate lines of code that have been omitted from this example.

{
  ...
  "componentStyles": {
    ...
    "sidebarBackgroundStyle": {
      "backgroundColor": "#EAF1F4"
    }
  },
  ...
}

Add and Anchor the Sidebar Content

  1. In your working article.json file, inside your map component, add a property named identifier with a value of "map", as in the example code Container: Result.

  2. Copy the example code Container: Copy This Code.

  3. Paste the code after the closing brace and comma that end your map component (},).

Your code should look like the example code Container: Result.

Container: Copy This Code

        {
          "role": "container",
          "layout": "sidebarLayout",
          "style": "sidebarBackgroundStyle",
          "anchor": {
            "targetComponentIdentifier": "map",
            "targetAnchorPosition": "top",
            "originAnchorPosition": "top"
          },
          "animation": {
            "type": "fade_in",
            "userControllable": true,
            "initialAlpha": 0.5
          },
          "components": [
            {
              "role": "heading3",
              "layout": "halfMarginBothContainedLayout",
              "text": "LEGEND"
            },
            {
              "role": "divider",
              "layout": "halfMarginBelowContainedLayout",
              "stroke": {
                "width": 1,
                "color": "#A6AAA9"
              }
            },
            {
              "role": "caption",
              "layout": "fullMarginBelowContainedLayout",
              "format": "html",
              "text": " <ul><li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.</li> <li>Praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi.</li> <li>Sint occaecati cupiditate non provident.</li> <li>similique sunt in culpa qui officia deserunt mollitia animi.</li> <li>Et harum quidem rerum facilis est et expedita distinctio.</li></ul>"
            }
          ]
        },

Container: Result

Ellipses (...) indicate lines of code that have been omitted from this example.

{
  ...
  "components": [
    ...
    {
      "role": "section",
      "layout": "fullBleedLayout",
      "style": "bodyBackgroundStyle",
      "components": [
        ...
        {
          "identifier": "map",
          "role": "map",
          "layout": "noMarginLayout",
          "mapType": "hybrid",
          "caption": "Map caption",
          "latitude": 35.065908,
          "longitude": -109.781623,
          "span": {
            "latitudeDelta": 5,
            "longitudeDelta": 5
          },
          "animation": {
            "type": "fade_in",
            "userControllable": true,
            "initialAlpha": 0.5
          },
          "items": [
            {
              "caption": "A caption for this map pin",
              "latitude": 35.065908,
              "longitude": -109.781623
            }
          ]
        },
        {
          "role": "container",
          "layout": "sidebarLayout",
          "style": "sidebarBackgroundStyle",
          "anchor": {
            "targetComponentIdentifier": "map",
            "targetAnchorPosition": "top",
            "originAnchorPosition": "top"
          },
          "animation": {
            "type": "fade_in",
            "userControllable": true,
            "initialAlpha": 0.5
          },
          "components": [
            {
              "role": "heading3",
              "layout": "halfMarginBothContainedLayout",
              "text": "LEGEND"
            },
            {
              "role": "divider",
              "layout": "halfMarginBelowContainedLayout",
              "stroke": {
                "width": 1,
                "color": "#A6AAA9"
              }
            },
            {
              "role": "caption",
              "layout": "fullMarginBelowContainedLayout",
              "format": "html",
              "text": " <ul><li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.</li> <li>Praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi.</li> <li>Sint occaecati cupiditate non provident.</li> <li>similique sunt in culpa qui officia deserunt mollitia animi.</li> <li>Et harum quidem rerum facilis est et expedita distinctio.</li></ul>"
            }
          ]
        },
        ...
      ]
    }
  ],
  ...
}

Previous

Next

See Also

Advanced Design Tutorial 3: More Ideas

Giving the Article a Dark Color Scheme

Apply a new color scheme to your article.

Adding a Video

Add a video component inside the header component.

Adding a Fixed Image Fill

Add an image that remains stationary when the user scrolls.