---
title: ArticleDocument.componentLayouts
framework: applenewsformat
role: symbol
role_heading: Object
path: applenewsformat/articledocument/componentlayouts-data.dictionary
---

# ArticleDocument.componentLayouts

An object containing component layout objects that components in the article can refer to.

## Declaration

```data
object ArticleDocument.componentLayouts
```

## Properties

Any Key: A component layout, with a name you define that components within this document can refer to.

## Mentioned in

Positioning the Content in Your Article

## Discussion

Discussion ArticleDocument.componentLayouts is an object containing the component layout objects that components in your article can use. You provide each component layout object as a key-value pair. In each pair, you create a key that’s meaningful to you. The value of each pair is a ComponentLayout object. Example {   "title": "Sample Article",   "identifier": "sample",   "version": "1.8",   "language": "en",   "layout": {     "columns": 20,     "width": 1024,     "margin": 60,     "gutter": 20   },   "documentStyle": {     "backgroundColor": "#F7F7F7"   },   "components": [     {       "role": "body",       "format": "html",       "layout": "exampleLayout",       "text": "<p>There is a moment in every dawn when light floats, there is the possibility of magic.</p>"     }   ],   "componentTextStyles": {},   "textStyles": {},   "componentStyles": {},   "componentLayouts": {     "exampleLayout": {       "columnStart": 0,       "columnSpan": 3,       "margin": {         "top": 50,         "bottom": 50       }     }   } }

## See Also

### Objects

- [ArticleDocument.componentStyles](applenewsformat/articledocument/componentstyles-data.dictionary.md)
- [ArticleDocument.componentTextStyles](applenewsformat/articledocument/componenttextstyles-data.dictionary.md)
- [ArticleDocument.textStyles](applenewsformat/articledocument/textstyles-data.dictionary.md)
- [ArticleDocument.colorScheme](applenewsformat/articledocument/colorscheme-data.dictionary.md)