---
title: Container
framework: applenewsformat
role: symbol
role_heading: Object
path: applenewsformat/container
---

# Container

Properties shared by all container types.

## Declaration

```data
object Container
```

## Properties

role: Always container for this component. additions: An array of ComponentLink objects you can use to create a ComponentLink, allowing a link to anywhere in News. You can add a link to a Container component to make the entire component tappable. Any links used in its child components are not interactable. allowAutoplacedAds: A Boolean value that allows the placement of ad banners between components. Nested components inherit the value of the outermost container that explicitly sets allowAutoplacedAds. The default value is true. anchor: An object that defines vertical alignment with another component. animation: An object that defines an animation you apply to the component. Use the none value for conditional design elements. Adding it here has no effect. behavior: An object that defines behavior for a component, like Parallax or Springy. The none value is used for conditional design elements. Adding it here has no effect. components: An array of components to display as child components. Child components are positioned and rendered relative to their parent component. conditional: An instance or array of container properties that can be applied conditionally, and the conditions that cause Apple News Forrmat to apply them. contentDisplay: An object that defines how to position child components within this container component. A HorizontalStackDisplay, for example, allows for displaying child components side by side. In versions of News prior to iOS 11, child components are positioned as if contentDisplay were not defined. The none value is used for conditional design elements. Adding it here has no effect. hidden: A Boolean value that determines whether the component is hidden. identifier: An optional unique identifier for this component. If used, this identifier must be unique across the entire document. You will need an identifier for your component if you want to anchor other components to it. layout: An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout object that is defined at the top level of the document. If layout is not defined, size and position are based on various factors, such as the device type, the length of the content, and the role of this component. style: An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle object that is defined at the top level of the document. The none value is used for conditional design elements. Adding it here has no effect.

## Mentioned in

Adding Components Displaying Components Side By Side Nesting Components in an Article

## Discussion

Discussion A container component is a structural component that holds other components and allows for logical grouping to use for layout and styling information. Child components of container are positioned and rendered relative to the parent component. The minimum size of a container component is determined by the size of its child components. Example {   "components": [     {       "role": "container",       "components": [         {           "role": "container",           "style": {             "backgroundColor": "#DDD"           },           "additions": [             {               "type": "link",               "URL": "https://apple.news/TqT-jfrI0QXaYqGoz68HYeQ"             }           ],           "components": [             {               "role": "heading",               "layout": {                 "contentInset": true               },               "textStyle": {                 "textAlignment": "center"               },               "text": "Top Stories"             }           ]         },         {           "role": "container",           "style": {             "backgroundColor": "#c6c6c6"           },           "additions": [             {               "type": "link",               "URL": "https://apple.news/TEa7q5ujiSdm1_YFSrEYYSw"             }           ],           "components": [             {               "role": "heading",               "layout": {                 "contentInset": true               },               "textStyle": {                 "textAlignment": "center"               },               "text": "Top Videos"             }           ]         }       ]     }   ] }

## Relationships

### Inherits From

- [Component](applenewsformat/component.md)

### Inherited By

- [ArticleLink](applenewsformat/articlelink.md)
- [Aside](applenewsformat/aside.md)
- [Chapter](applenewsformat/chapter.md)
- [Header](applenewsformat/header.md)
- [Section](applenewsformat/section.md)

## See Also

### Related Documentation

- [About Containers](applenews/about-containers.md)

### Article Structure

- [Nesting Components in an Article](applenews/nesting-components-in-an-article.md)
- [Adding a Scene to a Chapter or a Section Header](applenews/adding-a-scene-to-a-chapter-or-a-section-header.md)
- [Creating an Article Link](applenews/creating-an-article-link.md)
- [Displaying Components Side By Side](applenews/displaying-components-side-by-side.md)
- [Header](applenewsformat/header.md)
- [Section](applenewsformat/section.md)
- [Chapter](applenewsformat/chapter.md)
- [Aside](applenewsformat/aside.md)
- [CollectionDisplay](applenewsformat/collectiondisplay.md)
- [HorizontalStackDisplay](applenewsformat/horizontalstackdisplay.md)
- [FlexibleSpacer](applenewsformat/flexiblespacer.md)
- [Divider](applenewsformat/divider.md)
- [ArticleLink](applenewsformat/articlelink.md)
- [SupportedArticleIdentifier](applenewsformat/supportedarticleidentifier.md)
- [PublisherArticleIdentifier](applenewsformat/publisherarticleidentifier.md)