Contents

Nesting Components in an Article

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

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.

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.

[Image]

Apple News Format has several container components that allow you to nest other components within them:

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

Article Structure