# Creating a Sidebar Create a box with an HTML bulleted list in the margin. ## Discussion 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.** ![Screenshot of an Apple News article with an anchored sidebar on iPad.](images/com.apple.applenews/media-3624926@2x.png) ### 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 . 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: Copy This Code ```json , "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. ```json { ... "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 . 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: Copy This Code ```json , "sidebarBackgroundStyle": { "backgroundColor": "#EAF1F4" } ``` #### sidebarBackgroundStyle: Result Ellipses (`...`) indicate lines of code that have been omitted from this example. ```json { ... "componentStyles": { ... "sidebarBackgroundStyle": { "backgroundColor": "#EAF1F4" } }, ... } ``` ### Update the Body Component In your working `article.json` file, update the `body` component that follows the `podcast` component. 1. Copy the example code . 2. Paste the copied code, replacing the `body` component that follows the `podcast` component. Your code should look like the example code #### Body: Copy This Code ```json { "identifier": "body2", "role": "body", "format": "html", "layout": "fullMarginAboveLayout", "text": "

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio. Dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati.

Sed dignissim magna nec metus tincidunt, in posuere tortor malesuada. Morbi auctor justo sodales nulla tincidunt rhoncus. Praesent aliquam, ex eu auctor auctor, turpis metus vehicula augue, non dapibus odio massa a massa. Nunc condimentum dui quis odio condimentum, ac sodales libero elementum. Nullam sagittis felis ac tortor varius ultricies. Duis aliquet ex vel orci aliquam, sit amet bibendum risus rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Aliquam erat volutpat. Phasellus laoreet porttitor quam ut hendrerit. Aliquam nec arcu scelerisque, scelerisque nisi sit amet, eleifend augue. Nunc sit amet elit commodo, congue felis eget, gravida nibh. Praesent lorem risus, tristique sed porta non, aliquam in sapien. Praesent rhoncus orci eu scelerisque euismod. Morbi bibendum lorem lorem, eu tincidunt neque volutpat sit amet. Sed urna ligula, volutpat nec posuere a, laoreet ut tellus. Curabitur lacinia ornare nisi, et aliquet ex pretium sit amet. Aliquam finibus tristique arcu at feugiat. Donec nec sodales magna. Nulla vulputate sem eget libero venenatis lobortis. Morbi nec sodales metus. Ut eu diam quis augue imperdiet interdum ac quis metus.

" }, ``` #### Body: Result Ellipses (`...`) indicate lines of code that have been omitted from this example. ```json { ... "components": [ ... { "role": "section", "layout": "fullBleedLayout", "style": "bodyBackgroundStyle", "components": [ ... { "role": "podcast", "layout": "noMarginLayout", "orientation": "horizontal", "URL": "https://podcasts.apple.com/us/podcast/apple-news-today/id1473872585" }, { "identifier": "body2", "role": "body", "format": "html", "layout": "fullMarginAboveLayout", "text": "

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio. Dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati.

Sed dignissim magna nec metus tincidunt, in posuere tortor malesuada. Morbi auctor justo sodales nulla tincidunt rhoncus. Praesent aliquam, ex eu auctor auctor, turpis metus vehicula augue, non dapibus odio massa a massa. Nunc condimentum dui quis odio condimentum, ac sodales libero elementum. Nullam sagittis felis ac tortor varius ultricies. Duis aliquet ex vel orci aliquam, sit amet bibendum risus rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Aliquam erat volutpat. Phasellus laoreet porttitor quam ut hendrerit. Aliquam nec arcu scelerisque, scelerisque nisi sit amet, eleifend augue. Nunc sit amet elit commodo, congue felis eget, gravida nibh. Praesent lorem risus, tristique sed porta non, aliquam in sapien. Praesent rhoncus orci eu scelerisque euismod. Morbi bibendum lorem lorem, eu tincidunt neque volutpat sit amet. Sed urna ligula, volutpat nec posuere a, laoreet ut tellus. Curabitur lacinia ornare nisi, et aliquet ex pretium sit amet. Aliquam finibus tristique arcu at feugiat. Donec nec sodales magna. Nulla vulputate sem eget libero venenatis lobortis. Morbi nec sodales metus. Ut eu diam quis augue imperdiet interdum ac quis metus.

" }, ... ] } ], ... } ``` ### Add and Anchor the Sidebar Content In your working `article.json` file, the `body` component that follows the `podcast` component should now have an `identifier` property with the value `body2`. 1. Copy the example code . 2. Paste the code after the closing brace and comma at the end of the body component that contains an identifier property with the value `body2`. Your code should look like the example code . #### Container: Copy This Code ```json { "role": "container", "layout": "sidebarLayout", "style": "sidebarBackgroundStyle", "anchor": { "targetComponentIdentifier": "body2", "targetAnchorPosition": "bottom", "originAnchorPosition": "bottom" }, "animation": { "type": "fade_in", "userControllable": true, "initialAlpha": 0.5 }, "components": [ { "role": "heading3", "layout": "halfMarginBothContainedLayout", "text": "EPISODES OF NOTE" }, { "role": "divider", "layout": "halfMarginBelowContainedLayout", "stroke": { "width": 1, "color": "#A6AAA9" } }, { "role": "caption", "layout": "fullMarginBelowContainedLayout", "format": "html", "text": "
  • At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.
  • Praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi.
  • Sint occaecati cupiditate non provident.
  • similique sunt in culpa qui officia deserunt mollitia animi.
  • Et harum quidem rerum facilis est et expedita distinctio.
" } ] }, ``` #### Container: Result Ellipses (`...`) indicate lines of code that have been omitted from this example. ```json { ... "components": [ ... { "role": "section", "layout": "fullBleedLayout", "style": "bodyBackgroundStyle", "components": [ ... { "identifier": "body2", "role": "body", "format": "html", "layout": "fullMarginAboveLayout", "text": "

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio. Dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati.

Sed dignissim magna nec metus tincidunt, in posuere tortor malesuada. Morbi auctor justo sodales nulla tincidunt rhoncus. Praesent aliquam, ex eu auctor auctor, turpis metus vehicula augue, non dapibus odio massa a massa. Nunc condimentum dui quis odio condimentum, ac sodales libero elementum. Nullam sagittis felis ac tortor varius ultricies. Duis aliquet ex vel orci aliquam, sit amet bibendum risus rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Aliquam erat volutpat. Phasellus laoreet porttitor quam ut hendrerit. Aliquam nec arcu scelerisque, scelerisque nisi sit amet, eleifend augue. Nunc sit amet elit commodo, congue felis eget, gravida nibh. Praesent lorem risus, tristique sed porta non, aliquam in sapien. Praesent rhoncus orci eu scelerisque euismod. Morbi bibendum lorem lorem, eu tincidunt neque volutpat sit amet. Sed urna ligula, volutpat nec posuere a, laoreet ut tellus. Curabitur lacinia ornare nisi, et aliquet ex pretium sit amet. Aliquam finibus tristique arcu at feugiat. Donec nec sodales magna. Nulla vulputate sem eget libero venenatis lobortis. Morbi nec sodales metus. Ut eu diam quis augue imperdiet interdum ac quis metus.

" }, { "role": "container", "layout": "sidebarLayout", "style": "sidebarBackgroundStyle", "anchor": { "targetComponentIdentifier": "body2", "targetAnchorPosition": "bottom", "originAnchorPosition": "bottom" }, "animation": { "type": "fade_in", "userControllable": true, "initialAlpha": 0.5 }, "components": [ { "role": "heading3", "layout": "halfMarginBothContainedLayout", "text": "EPISODES OF NOTE" }, { "role": "divider", "layout": "halfMarginBelowContainedLayout", "stroke": { "width": 1, "color": "#A6AAA9" } }, { "role": "caption", "layout": "fullMarginBelowContainedLayout", "format": "html", "text": "
  • At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.
  • Praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi.
  • Sint occaecati cupiditate non provident.
  • similique sunt in culpa qui officia deserunt mollitia animi.
  • Et harum quidem rerum facilis est et expedita distinctio.
" } ] }, ... ] } ], ... } ``` ### Previous ### Next ## See Also [`object Anchor`](/documentation/AppleNewsFormat/Anchor) The object for anchoring one component to another component in your article’s layout. --- Copyright © 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)