Row

tile/row

Arranges child components horizontally with a configurable gap, alignment, justification, and wrapping.

Arrange child tiles horizontally, side by side, with consistent spacing between them. Use a row to make content flow left to right.

For example, a row can include a label next to a value, a status badge beside a title, or a group of buttons.

1{
2    "definition": "tile/row",
3    "attributes": { "gap": "sm" },
4    "children": [
5        {
6            "definition": "tile/text",
7            "attributes": { "text": "Acme Corp", "variant": "h4" }
8        },
9        {
10            "definition": "tile/badge",
11            "attributes": { "label": "Active", "variant": "success" }
12        }
13    ]
14}

To place content on opposite ends, set justify to between. Placing content on opposite ends is a common header pattern, for example, a title on one side and an action on the other.

1{
2    "definition": "tile/row",
3    "attributes": { "justify": "between", "align": "center" },
4    "children": [
5        {
6            "definition": "tile/text",
7            "attributes": { "text": "Product Name", "variant": "h4" }
8        },
9        {
10            "definition": "tile/text",
11            "attributes": { "text": "$99.99", "variant": "h4", "weight": "bold" }
12        }
13    ]
14}

To build multi-column layouts, place tile/column tiles as the direct children of a row and specify the width on each column. Use width: "stretch" on one of the columns so it absorbs the remaining horizontal space while the other columns stay content-sized.

1{
2    "definition": "tile/row",
3    "attributes": { "gap": "md" },
4    "children": [
5        {
6            "definition": "tile/column",
7            "attributes": { "width": "md" },
8            "children": [{ "definition": "tile/text", "attributes": { "text": "Sidebar" } }]
9        },
10        {
11            "definition": "tile/column",
12            "attributes": { "width": "stretch" },
13            "children": [{ "definition": "tile/text", "attributes": { "text": "Main content" } }]
14        }
15    ]
16}

Use these align values to position child content along the row’s cross axis (vertical). This attribute applies to all child content uniformly.

• start: Content aligns to the top edge.
• center (default): Content centers vertically.
• end: Content aligns to the bottom edge.
• stretch: Content expands to fill the full row height.

Use these gap values to set the spacing between child content. The gap applies uniformly between all child content. For individual spacing, use tile/spacer instead.

• none: No spacing between child content.
• xs: Extra small spacing.
• sm: Small spacing.
• md (default): Medium spacing.
• lg: Large spacing.
• xl: Extra large spacing.

Use these justify values to distribute child content along the row’s main axis (horizontal).

• start (default): Content packs to the leading edge.
• center: Content centers as a group.
• end: Content packs to the trailing edge.
• between: Content spreads with equal space between them, with the first and last flush to the edges.
• around: Content spreads with equal space around each, leaving half-size space at the edges.
• evenly: Content spreads with exactly equal space between them and at the edges.

Consider these guidelines when working with rows.

• Use tile/column to make content flow top to bottom rather than left to right.
• Use justify: "between" for header layouts that pin a title to one side and actions to the other.
• Set isWrapped to true when a row holds a variable number of items, such as tags or badges, making the items flow onto multiple lines when space runs out.
• Nest tile/column tiles as children and specify width: "stretch" on one of the columns to build a sidebar-and-main layout.

Note any limitations that apply to this component.

No known limitations for tile/row in Slackbot.

No known limitations for tile/row in ChatGPT.

No known limitations for tile/row in Agentforce.

• HXL Lightning Types Reference
• HXL Playground: Row