HorizontalStackDisplay

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

Declaration

object HorizontalStackDisplay

Properties

Name	Type	Description
`type` Required	string	Always `horizontal_stack` for this object.

Mentioned in

Displaying Components Side By Side

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"
          }
        }
      ]
    }
  ]
}