List Tile

tile/list

Shows a series of related items in a column. Use the tile/listitem child component for each item.

Use a list to arrange a series of related items in a single vertical column with consistent spacing that reads top to bottom. The list provides only the structural framing and optional leading markers. Each row is a tile/listitem that carries the actual content. Keep lists to between 1 and 10 items.

By default, the list doesn’t use a marker, such as a bullet or number. To use a disc-style bullet, specify "marker": "bullet".

1{
2    "definition": "tile/list",
3    "attributes": { "marker": "bullet" },
4    "children": [
5        {
6            "definition": "tile/listitem",
7            "children": [
8                {
9                    "definition": "tile/text",
10                    "attributes": { "text": "Set up your environment" }
11                }
12            ]
13        },
14        {
15            "definition": "tile/listitem",
16            "children": [
17                {
18                    "definition": "tile/text",
19                    "attributes": { "text": "Install dependencies" }
20                }
21            ]
22        }
23    ]
24}

A list item can hold more than one child to show a title with supporting detail. For a title plus supporting line, stack two tile/text children within the item rather than splitting across rows. The two text children stack horizontally inside the single list item.

1{
2    "definition": "tile/list",
3    "children": [
4        {
5            "definition": "tile/listitem",
6            "children": [
7                {
8                    "definition": "tile/text",
9                    "attributes": { "text": "Set up your environment", "variant": "bold" }
10                },
11                {
12                    "definition": "tile/text",
13                    "attributes": {
14                        "text": "Install Node.js 20+ and pnpm",
15                        "variant": "caption",
16                        "color": "muted"
17                    }
18                }
19            ]
20        }
21    ]
22}

Use these marker values to set the marker shown on each list item.

• none (default): No marker. Use the default for plain stacks of rows where order and decoration don’t add meaning.
• bullet: A bullet before each item for unordered sets where items are peers, such as features or options.
• number: Sequential numbering (1, 2, 3…) for ordered sequences such as steps or rankings where position matters.

Consider these guidelines when working with lists.

• Keep lists short. Consider a “see more” or a summarized view if there are more than 10 items.
• For a horizontal arrangement of items rather than a vertical column, use tile/row instead.

Note any limitations that apply to this component.

No known limitations for tile/list in Slackbot.

No known limitations for tile/list in ChatGPT.

No known limitations for tile/list in Agentforce.

• HXL Lightning Types Reference
• HXL Playground: List Tile