Column

tile/column

Arranges child components vertically with a configurable gap, cross-axis alignment, and width.

Stack child tiles vertically, top to bottom, with consistent spacing between them. Use a column to make content flow down the page. For example, a column can include a heading before body text that precedes a button.

1{
2    "definition": "tile/column",
3    "children": [
4        {
5            "definition": "tile/text",
6            "attributes": { "text": "Column Header", "variant": "h3" }
7        },
8        {
9            "definition": "tile/text",
10            "attributes": { "text": "Vertically stacked content." }
11        },
12        {
13            "definition": "tile/button",
14            "attributes": { "label": "Action", "variant": "primary" }
15        }
16    ]
17}

To build multi-column layouts where each column controls its own width, use the column with tile/row. Use gap for uniform spacing between all child content. Place each column inside tile/row for a side-by-side layout. Give each column a width to control how it shares the horizontal space.

1{
2    "definition": "tile/row",
3    "attributes": { "gap": "sm" },
4    "children": [
5        {
6            "definition": "tile/column",
7            "attributes": { "width": "md" },
8            "children": [
9                { "definition": "tile/text", "attributes": { "text": "Left", "variant": "h5" } }
10            ]
11        },
12        {
13            "definition": "tile/column",
14            "attributes": { "width": "stretch" },
15            "children": [
16                { "definition": "tile/text", "attributes": { "text": "Right", "variant": "h5" } }
17            ]
18        }
19    ]
20}

Use these align values to specify how the column positions the content. This attribute applies to all child content uniformly.

• start: Content aligns to the leading edge.
• center: Content centers horizontally.
• end: Content aligns to the trailing edge.
• stretch: Content expands to fill the full column width.

Use these width values to specify the content width in a column. By default, the column has no width constraint and behaves like auto. The width can vary across surfaces.

• auto: Content sizes automatically with no explicit width constraint.
• xs: Extra small fixed width, or 3 out of a 12-column grid.
• sm: Small fixed width, or 4 out of a 12-column grid.
• md: Medium fixed width, or 6 out of a 12-column grid.
• lg: Large fixed width, or 8 out of a 12-column grid.
• xl: Extra large fixed width, or 9 out of a 12-column grid.
• full: Takes 100% of the parent width. Use full for single-column layouts or to make the column occupy the entire line.
• stretch: Grows to fill remaining available space in the parent, which is similar to the flex-grow behavior. Use stretch for fluid layouts like the sidebar or main content. Multiple columns that use stretch in the same row share remaining space equally.

Consider these guidelines when working with columns.

• For a one-off gap between two specific children, insert a tile/spacer instead.
• Use tile/row to make content flow left to right rather than top to bottom.
• Set align to center to horizontally center children, or leave it at the default for the child content to fill the column width.
• Inside a row, give one column width: "stretch" so it absorbs the remaining space while the sibling rows stay content-sized.

Note any limitations that apply to this component.

No known limitations for tile/column in Slackbot.

No known limitations for tile/column in ChatGPT.

No known limitations for tile/column in Agentforce.

• HXL Lightning Types Reference
• HXL Playground: Column