Layout Component Blocks

Layout component blocks are structural containers that organize content.

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.

AttributeTypeDescription
stackOnMobilebooleanIf true, columns stack vertically on mobile devices. The default value is true.
lightning:colorSchemestringThe 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:marginstringThe space outside of the section border, separating it from surrounding elements. Accepts a brand spacing token such as {!$brand.spacing.none}.
lightning:paddingstringThe space between the section border and the content that it contains. Accepts a brand spacing token such as {!$brand.spacing.xSmall}.
lightning:borderRadiusstringThe roundness of the section’s corners. Accepts a brand border radius token such as {!$brand.borderRadius.square}.
lightning:borderWidthstringThe thickness of the border for the section. Accepts a brand border weight token such as {!$brand.borderWeight.none}.
lightning:backgroundImageobjectA 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.

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.

AttributeTypeDescription
columnWidthintegerRequired. 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:verticalAlignmentstringWhere content is positioned vertically within the column. Possible values are top, middle, or bottom.
lightning:paddingstringThe space between the column border and its content. Accepts a brand spacing token such as {!$brand.spacing.xSmall}.
lightning:marginstringThe 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:colorSchemestringThe 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.

A horizontal separator line between content elements.

AttributeTypeDescription
lineStylestringRequired. The visual style of the divider line. Possible values are solid, dashed, or dotted. The default value is solid.
lineWeightstringRequired. The thickness of the divider line. Accepts px or rem values.
lineWidthstringRequired. 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:horizontalAlignmentstringWhere 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.