Row

The Row component is used when you want the components added to it to be arranged in columns. It is similar to how the Section component works when the columns key is set to null, except it doesn't provide a title above the content.

Example JSON

Below is an example of the JSON required to define a Row.

{
    "type": "Row",
    "options": {
        "columns": 2
    },
    "components": [
        {
            "type": "Text",
            "options": {
                "text": "Lorem ipsum dolor sit amet",
                "bg_colour": "background-faded"
            }
        },
        {
            "type": "Text",
            "options": {
                "text": "Lorem ipsum dolor sit amet",
                "bg_colour": "background-faded"
            }
        }
    ]
}

Options

Key	Description
`width`	Optional. The width of the component. Only applies when inside a `Section` or `Row` component whose `columns` option is set to `null`.
`horizontal_margin`	Optional. Margin added horizontally to the element. Defaults to `0`.
`vertical_margin`	Optional. Margin added vertically to the element. Defaults to `1`.
`column_spacing`	Optional. Spacing between components rendered as columns. Defaults to 3. Accepts any integer between `1` - `12`, `14` or `16`.
`columns`	Optional. The number of columns to divide the section up into. See below for more details.
`align`	Optional. Defaults to `left`. The alignment of content within the component, can be either `left`, `centre`, `center` or `right`. Only applicable if `columns` is set to `null`, and a single component is added whose width is not set to `full`.

Components / extendable

This component is extendable, meaning it supports adding components within it. To add components inside, simply add the objects defining the components inside the top level components key (this key is at the same level as options).

Margin values

For the various options targetting margins, the allowed values are detailed here.

Justification / alignment

If the columns key is set to null, then the child components can take on width values (e.g. 1/3). In such a scenario, the align key can be used to either left, right or centre align them within the Row.

Width

For details on the width key, please see here.

Columns

For details on the columns key, please see here.

General

Getting started

API

Reports

Components

Premium components

Beta features

Deprecated components

Managed Cloud

Row