Separator

tile/separator

Adds a visual boundary between content sections by using a horizontal or vertical line.

Use a separator to mark a boundary between sections of content with a visible line. A separator is useful as a thematic break between groups of related content, between list sections, or inside a toolbar.

A separator inherits its length from the container it sits in: a horizontal separator spans the full width of its parent, and a vertical separator spans the full height.

To include a horizontal separator between vertical groups of text, use tile/separator as a child of tile/column.

1{
2    "definition": "tile/column",
3    "children": [
4        { "definition": "tile/text", "attributes": { "text": "Account details" } },
5        { "definition": "tile/separator" },
6        { "definition": "tile/text", "attributes": { "text": "Billing details" } }
7    ]
8}

To place a vertical separator between items arranged in a row, use tile/separator as a child of tile/row and specify "orientation": "vertical".

1{
2    "definition": "tile/row",
3    "attributes": { "gap": "sm" },
4    "children": [
5        { "definition": "tile/text", "attributes": { "text": "Drafts" } },
6        { "definition": "tile/separator", "attributes": { "orientation": "vertical" } },
7        { "definition": "tile/text", "attributes": { "text": "Sent" } }
8    ]
9}

Use orientation to set the axis of the dividing line. By default the separator is horizontal, matching the most common case of breaking up vertically stacked content.

• horizontal: A left-to-right line spanning the container width. Use to break between vertically stacked content, such as sections in a column.
• vertical: A top-to-bottom line spanning the container height. Use to break between horizontally arranged content, such as items in a row or a toolbar.

Consider these guidelines when working with separators.

• Use a separator only when a visible line aids comprehension. For routine spacing between elements, use gap on the tile/row or tile/column parent container.
• Match orientation to the parent layout. For example, use vertical inside a row, and horizontal inside a column, so the line spans the intended axis.
• Avoid stacking multiple separators with no content between them.

Note any limitations that apply to this component.

No known limitations for tile/separator in Slackbot.

No known limitations for tile/separator in ChatGPT.

No known limitations for tile/separator in Agentforce.

• HXL Lightning Types Reference
• HXL Playground: Separator