columns

Overview
columns allow developers to control the layout of a view and its components, which is particularly useful for medium and large screens.
On screens narrower than the 768px breakpoint value (i.e. smartphones as opposed to tablets), columns will be stacked — the components inside of them are rendered below each other as if they were not defined in columns.
Multiple columns
Columns now support multiple nested columns which enables use cases like the following:
Basic Example
main.view.xml
<columns>
    <column>
        <heading>Column 1</heading>
    </column>
    <column>
        <heading>Column 2</heading>
    </column>
    <column>
        <heading>Column 3</heading>
    </column>
</columns>
Standard Attributes
None
Advanced Attributes
column-gap
Version compatibility
column-gap was introduced in version 4.86.1 of the JourneyApps Runtime.
Optional
Type: number (a values in px)
Default: 48 px
Specify the width of the gap between columns.
main.view.xml
<info>default column-gap</info>
<columns>
    <column>
        <heading>Column 1</heading>
    </column>
    <column>
        <heading>Column 2</heading>
    </column>
    <column>
        <heading>Column 3</heading>
    </column>
</columns>
​
<info>column-gap="80"</info>
<columns column-gap="80">
    <column>
        <heading>Column 1</heading>
    </column>
    <column>
        <heading>Column 2</heading>
    </column>
    <column>
        <heading>Column 3</heading>
    </column>
</columns>
column-order
Version compatibility
column-order was introduced in version 4.86.1 of the JourneyApps Runtime.
Optional
Type: left-to-right| right-to-left
Default: left-to-right
Specify the order of the columns.
main.view.xml
<info>column-order="left-to-right"</info>
<columns column-order="left-to-right">
    <column>
        <heading>Column 1</heading>
    </column>
    <column>
        <heading>Column 2</heading>
    </column>
    <column>
        <heading>Column 3</heading>
    </column>
</columns>
​
<info>column-order="right-to-left"</info>
<columns column-order="right-to-left">
    <column>
        <heading>Column 1</heading>
    </column>
    <column>
        <heading>Column 2</heading>
    </column>
    <column>
        <heading>Column 3</heading>
    </column>
</columns>
show-if and hide-if
show-if
hide-if

card

column

Last modified 1mo ago

columns

Overview

Multiple columns

Basic Example

Standard Attributes

Advanced Attributes

`column-gap`

`column-order`

`show-if` and `hide-if`