---
title: Adding a Divider
framework: applenews
role: article
role_heading: Article
path: applenews/adding-a-divider
---

# Adding a Divider

Create a horizontal, styled divider that extends to the right edge of the display.

## Overview

Overview In Creating Your First Article, you added some text components to your article. Now, you can add a divider component to visually separate some text components and create color contrast. On this page, you’ll learn how to create a horizontal dividing line that extends to the right edge of the display.

Define a ComponentLayout Object that Bleeds to the Right Edge Before you can make your divider line extend to the right edge of the display, you must define a new ComponentLayout object that uses the ignoreDocumentMargin property. Copy the example code bigDividerLayout: Copy This Code. Paste the code inside your ArticleDocument.componentLayouts object, after the closing brace (}) of the last ComponentLayout object and before the closing brace for the whole componentLayouts property. Your code should look like the example code bigDividerLayout: Result. bigDividerLayout: Copy This Code ,     "bigDividerLayout": {       "ignoreDocumentMargin": "right",       "columnStart": 0,       "columnSpan": 20,       "margin": {         "top": 6,         "bottom": 6       }     } bigDividerLayout: Result Ellipses (...) indicate lines of code that have been omitted from this example. {   ...   "componentLayouts": {     ...     "bigDividerLayout": {       "ignoreDocumentMargin": "right",       "columnStart": 0,       "columnSpan": 20,       "margin": {         "top": 6,         "bottom": 6       }     }   },   ... } Add a Divider in Your Article A divider component in your JSON file represents a divider line in your article. Copy the example code Divider: Copy This Code. Paste the code inside the components array of your article, after the closing brace and comma (},) that end heading1 component. Your code should look like the example code Divider: Result. After you make this change in your code, you can preview your working article.json file in News Preview to see a yellow divider. Divider: Copy This Code     {       "role": "divider",       "layout": "bigDividerLayout",       "stroke": {         "width": 3,         "color": "#D5B327"       }     }, Divider: Result Ellipses (…) indicate lines of code that have been omitted from this example. {   ...   "components": [     ...     {       "role": "divider",       "layout": "bigDividerLayout",       "stroke": {         "width": 3,         "color": "#D5B327"       }     },     ...   ],   ... } Further Exploration At any time, you can try changing property values in your article.json file and then use News Preview to see how these changes affect the look of your article. For example, try changing the layout of your article’s divider component: In your article.json file, find the ComponentLayout object called bigDividerLayout. In bigDividerLayout, find the ignoreDocumentMargin property and replace its value ("right") with "both". Preview your article.json file in News Preview. The divider now ignores the margins on both sides of the document. Previous Positioning Text Components Next Adding an Image and Captions

## See Also

### Related Documentation

- [Divider](applenewsformat/divider.md)
- [ComponentLayout](applenewsformat/componentlayout.md)
- [StrokeStyle](applenewsformat/strokestyle.md)

### Introductory Design Tutorial

- [Setting Up the Introductory Tutorial](applenews/setting-up-the-introductory-tutorial.md)
- [Creating Your First Article](applenews/creating-your-first-article.md)
- [Positioning Text Components](applenews/positioning-text-components.md)
- [Adding an Image and Captions](applenews/adding-an-image-and-captions.md)
- [Adding a Pull Quote](applenews/adding-a-pull-quote.md)
- [Adding a Gallery of Images](applenews/adding-a-gallery-of-images.md)
- [Adding a Mosaic of Images](applenews/adding-a-mosaic-of-images.md)
- [Adding a Tweet](applenews/adding-a-tweet.md)
- [Adding a Podcast](applenews/adding-a-podcast.md)
- [Viewing the Finished Article for the Introductory Design Tutorial](applenews/viewing-the-finished-article-for-the-introductory-design-tutorial.md)