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

```sfdocs-code {"lang":"json", "title":"Example"}
{
  "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.

```sfdocs-code {"lang":"json", "title":"Example"}
{
  "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.

```sfdocs-code {"lang":"json", "title":"Example"}
{
  "type": "block",
  "definition": "lightning/divider",
  "attributes": {
    "lineStyle": "solid",
    "lineWeight": "2px",
    "lineWidth": "100%",
    "lightning:horizontalAlignment": "center"
  }
}
```

## Related Items

- [Content Component Blocks](/docs/marketing/marketing-cloud-growth/guide/mc-manage-component-blocks.md)