Salesforce Docs Portal

Layout Component Blocks

Layout component blocks are structural containers that organize content.

lightning/section

The section block is a top-level layout container that organizes content into columns based on a 12-column grid system. Use stackOnMobile to control whether columns stack vertically on mobile devices.

Attribute Type Description
stackOnMobile boolean If true, columns stack vertically on mobile devices. The default value is true.
lightning:colorScheme string The color scheme applied to the section, based on your brand settings. The value of this property determines the background, text, and link colors within the section.
lightning:margin string The space outside of the section border, separating it from surrounding elements. Accepts a brand spacing token such as {!$brand.spacing.none}.
lightning:padding string The space between the section border and the content that it contains. Accepts a brand spacing token such as {!$brand.spacing.xSmall}.
lightning:borderRadius string The roundness of the section’s corners. Accepts a brand border radius token such as {!$brand.borderRadius.square}.
lightning:borderWidth string The thickness of the border for the section. Accepts a brand border weight token such as {!$brand.borderWeight.none}.
lightning:backgroundImage object A background image that appears behind the content in the section. Contains properties for the image URL, position, repeat behavior, and size.

This example shows how to create a section with one full-width column.

{
  "type": "block",
  "definition": "lightning/section",
  "attributes": {
    "stackOnMobile": true,
    "lightning:colorScheme": "{!$brand.colorScheme}",
    "lightning:padding": "{!$brand.spacing.xSmall}"
  },
  "children": [
    {
      "type": "block",
      "definition": "lightning/column",
      "attributes": {
        "columnWidth": 12
      },
      "children": []
    }
  ]
}

lightning/column

A content container within a section. Because a section uses a 12-column grid system, the sum of all columnWidth values in a section must be 12.

Attribute Type Description
columnWidth integer Required. The width of the column expressed in terms of the 12-column grid layout. For example, to create a column that’s one quarter as wide as the parent section, specify 3. The minimum value is 1 and the maximum value is 12. The default value is 12.
lightning:verticalAlignment string Where content is positioned vertically within the column. Possible values are top, middle, or bottom.
lightning:padding string The space between the column border and its content. Accepts a brand spacing token such as {!$brand.spacing.xSmall}.
lightning:margin string The space outside of the column border, separating it from adjacent columns and section edges. Accepts a brand spacing token such as {!$brand.spacing.none}.
lightning:colorScheme string The color scheme applied to the column, sourced from your brand settings. Controls background, text, and link colors within the column.

This example shows how to create a column that’s half the width of the parent section. In this example, content is vertically aligned to the top of the column.

{
  "type": "block",
  "definition": "lightning/column",
  "attributes": {
    "columnWidth": 6,
    "lightning:verticalAlignment": "top"
  },
  "children": []
}

lightning/divider

A horizontal separator line between content elements.

Attribute Type Description
lineStyle string Required. The visual style of the divider line. Possible values are solid, dashed, or dotted. The default value is solid.
lineWeight string Required. The thickness of the divider line. Accepts px or rem values.
lineWidth string Required. The width of the divider line relative to its container. Specify the value as a percentage (%), number of pixels (px), or root em units (rem).
lightning:horizontalAlignment string Where the divider line is positioned horizontally within its container. Possible values are left, center, or right.

This example shows how to create a solid, full-width divider in the center of its container.

{
  "type": "block",
  "definition": "lightning/divider",
  "attributes": {
    "lineStyle": "solid",
    "lineWeight": "2px",
    "lineWidth": "100%",
    "lightning:horizontalAlignment": "center"
  }
}

Related Items