Container

tile/container

Creates a container with a rounded border that accepts any children.

Properties

Name	Required	Lightning Type	Default	Description
borderless	No	`lightning__booleanType`	false	Specifies whether the container omits its border.
variant	No	`lightning__textType`	`default`	Sets the visual variant of the container.

Usage

Use a container to group related children inside a rounded, padded border. The container provides a card-like frame that visually separates a block of content from surrounding content.

To control layout in a container, use tile/column or tile/row. Wrap children content in a tile/column for vertical stacking or a tile/row for a horizontal arrangement. Use the gap attribute to space them.

1{
2    "definition": "tile/container",
3    "children": [
4        {
5            "definition": "tile/column",
6            "attributes": { "gap": "sm" },
7            "children": [
8                {
9                    "definition": "tile/text",
10                    "attributes": { "text": "Container", "variant": "h2" }
11                },
12                {
13                    "definition": "tile/text",
14                    "attributes": { "text": "A framed region that groups related content." }
15                },
16                {
17                    "definition": "tile/button",
18                    "attributes": { "label": "Action", "variant": "primary" }
19                }
20            ]
21        }
22    ]
23}

For grouping that needs no frame at all, use a tile/column or tile/row directly instead of a borderless container.

Note

To remove the border on the container, set borderless to true.

1{
2    "definition": "tile/container",
3    "attributes": { "borderless": true },
4    "children": [
5        {
6            "definition": "tile/text",
7            "attributes": { "text": "A flat, frameless region." }
8        }
9    ]
10}

Variant

Set variant to tint the container’s fill. Use it to group or emphasize a region, or to signal status. The default is default, which matches the surrounding background (no fill).

Value	Appearance	Use for
`default`	Matches the surrounding background (no fill)	The normal, unemphasized case
`emphasis`	A subtle neutral shade, slightly darker than the page	Setting a region apart without a status meaning
`info`	Blue	Informational or in-progress content
`warning`	Yellow	Cautions the user should notice
`error`	Red	Problems or destructive context
`success`	Green	Confirmations or completed states

The four status colors (info, warning, error, success) also tint the border to match the fill.

1{
2    "definition": "tile/container",
3    "attributes": { "variant": "info" },
4    "children": [
5        {
6            "definition": "tile/text",
7            "attributes": { "text": "Your changes are still syncing." }
8        }
9    ]
10}

Design Guidelines

Consider these guidelines when working with containers.

To arrange the children inside, nest a tile/column or tile/row rather than relying on the container itself.
Set borderless to true when a container is nested inside another framed surface, so the borders don’t stack and compete.
Avoid deeply nesting framed containers. Stacked borders and padding crowd the content in smaller screens.
Reach for a status variant (info, warning, error, success) only when the color carries meaning — and always convey that meaning in the container’s text content (e.g. a tile/text heading like “Warning” or “Completed with errors”), never through color alone (WCAG 2.2 SC 1.4.1, Use of Color). For a single titled status message with an icon, prefer tile/callout; use a tinted container to frame a broader region of content.
Use emphasis for a neutral emphasis that groups content without implying a status.

Limitations

Note any limitations that apply to this component.

Slackbot

No known limitations for tile/container in Slackbot.

ChatGPT

No known limitations for tile/container in ChatGPT.

Agentforce

No known limitations for tile/container in Agentforce.