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.
1{
2 "type": "block",
3 "definition": "lightning/section",
4 "attributes": {
5 "stackOnMobile": true,
6 "lightning:colorScheme": "{!$brand.colorScheme}",
7 "lightning:padding": "{!$brand.spacing.xSmall}"
8 },
9 "children": [
10 {
11 "type": "block",
12 "definition": "lightning/column",
13 "attributes": {
14 "columnWidth": 12
15 },
16 "children": []
17 }
18 ]
19}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.
1{
2 "type": "block",
3 "definition": "lightning/column",
4 "attributes": {
5 "columnWidth": 6,
6 "lightning:verticalAlignment": "top"
7 },
8 "children": []
9}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.
1{
2 "type": "block",
3 "definition": "lightning/divider",
4 "attributes": {
5 "lineStyle": "solid",
6 "lineWeight": "2px",
7 "lineWidth": "100%",
8 "lightning:horizontalAlignment": "center"
9 }
10}
j