---
title: Nesting Components in an Article
framework: applenews
role: article
role_heading: Article
path: applenews/nesting-components-in-an-article
---

# Nesting Components in an Article

Use container components to create the component hierarchies you need for special article designs.

## Overview

Overview A nested component is a child of the parent component that contains it. The child component is positioned and rendered relative to that parent. The size of the child components determines the minimum size of a container component. tip: If you use an anchor to attach multiple children to the same side of their parent component, the children “stack” to create a cleanly aligned header. For information about using container components and anchors, see Advanced Design Tutorial 2: Layout and Positioning. Many design and layout effects require you to use hierarchies of nested components. For example, you can create a layering effect by nesting content (such as a title) inside a parent component that has a background Fill. Any content displayed by the parent — as well as any content from its child components — is layered in front of the parent’s background fill, as shown in this example.

Apple News Format has several container components that allow you to nest other components within them: Chapter Header Section Container The Aside component also lets you nest other components, but generally contains content that isn’t directly related to your article. The following example shows a section component with two child components (title and photo) defined in its components array. {   "role": "section",   "components": [   {      "role": "title",      "text": "A Photo",    },   {      "role": "photo",      "URL": "bundle://.",      }     ] } All container components have a components property whose value is an array of components. In this array, the order of the components is the order in which they appear in your article.

## See Also

### Related Documentation

- [About Containers](applenews/about-containers.md)
- [Creating a Layered Header](applenews/creating-a-layered-header.md)
- [Creating a Complex, Layered Header](applenews/creating-a-complex-layered-header.md)
- [Creating a Floating Caption](applenews/creating-a-floating-caption.md)
- [Creating an Inset Pull Quote](applenews/creating-an-inset-pull-quote.md)
- [Creating an Inset Photo](applenews/creating-an-inset-photo.md)
- [Creating a Sidebar](applenews/creating-a-sidebar.md)

### Article Structure

- [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)
- [Container](applenewsformat/container.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)