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.
| 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.
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.
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.