Object

HorizontalStackDisplay

The object for displaying components side by side in a Container component.

Properties

type
string
(Required)

Always horizontal_stack for this object.

Value: horizontal_stack

Discussion

Use the HorizontalStackDisplay object in a container component for displaying components side by side.

Use HorizontalStackDisplay if you wish to specify what percent of the width the individual children should use. Use CollectionDisplay if you wish to make all child components to have the same width.

To redistribute the empty space inside a horizontal stack collection, use the FlexibleSpacer object.

This object can be used in Header, Container, Section, Chapter, Aside, and ArticleLink.

Example

{  "components": [    {      "role": "container",      "contentDisplay": {        "type": "horizontal_stack"      },      "components": [        {          "role": "title",          "text": "Sample article",          "layout": {            "minimumWidth": "60cw",            "maximumWidth": "60cw"          }        },        {          "role": "spacer"        },        {          "role": "image",          "URL": "bundle://image-1.jpg",          "layout": {            "minimumWidth": "35cw",            "maximumWidth": "35cw"          }        }      ]    }  ]}

See Also

Article Structure

Nesting Components in an Article

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

Adding a Scene to a Chapter or a Section Header

Add a scene to your article to create special effects.

Creating an Article Link

Link to an article by using the article-linking container component.

Displaying Components Side By Side

Configure a side-by-side, horizontal arrangement of components for your article.

object Header

The component for defining the top area of an article, chapter, or section.

object Container

Properties shared by all container types.

object Section

The component for organizing an article into sections.

object Chapter

The component for organizing an article into chapters.

object Aside

The component for setting apart content that is not directly related to the article, such as promotional content.

object CollectionDisplay

An object used in any container component type to define how the collection of child components is presented.

object FlexibleSpacer

The component for redistributing empty space inside a horizontal stack collection.

object Divider

The component for defining a horizontal line to visually divide parts of your article.

object ArticleLink

The container component for creating a link to an article.

object ArticleTitle

The component for displaying an article title in the ArticleLink component.

object ArticleThumbnail

The component for displaying a thumbnail image with an article link.