SectionContainer/V1

Full-width sections that contain rows or flex containers. Supports background, border, shadow, and corners.

Basic Structure

JSON

{
  "type": "SectionContainer/V1",
  "id": "6Z-xxxxx-0",
  "version": 0,
  "parentId": "",
  "fractionalIndex": "a0",
  "attrs": {
    "className": "fullContainer",
    "data-paint-colors": "lightest",
    "data-skip-background-settings": "false",
    "data-skip-shadow-settings": "false",
    "data-skip-corners-settings": "false"
  },
  "params": {},
  "children": []
}

Properties

className Values

Class	Description
`fullContainer`	Standard full-width section
`smallContainer`	Constrained width section
`bgCover`	Background image covers area
`bgCoverCenter`	Centered background image cover

Paint Colors (Styleguide)

Value	Description
`none`	No styleguide color applied
`lightest`	Lightest theme color
`light`	Light theme color
`dark`	Dark theme color
`darkest`	Darkest theme color

Responsive Visibility

Attribute	Value	Description
`data-show-only`	`desktop`	Show only on desktop
`data-show-only`	`mobile`	Show only on mobile
(omit attribute)	-	Show on both

Full Example

Section with background, border, shadow, corners, and spacing:

JSON

{
  "type": "SectionContainer/V1",
  "id": "6Z-AbCdE-0",
  "version": 0,
  "parentId": "",
  "fractionalIndex": "a0",
  "attrs": {
    "className": "fullContainer bgCoverCenter",
    "data-paint-colors": "lightest",
    "data-skip-background-settings": "false",
    "data-skip-shadow-settings": "false",
    "data-skip-corners-settings": "false",
    "style": {
      "margin-top": 0,
      "padding-top": 40,
      "padding-bottom": 40,
      "border-radius": 8,
      "background-position": "center !important"
    }
  },
  "params": {
    "margin-top--unit": "px",
    "padding-top--unit": "px",
    "padding-bottom--unit": "px",
    "--style-padding-horizontal": 20,
    "--style-padding-horizontal--unit": "px",
    "--style-background-color": "rgb(255, 255, 255)",
    "--style-background-image-url": "",
    "--style-border-style": "solid",
    "--style-border-width": 1,
    "--style-border-width--unit": "px",
    "--style-border-color": "#e2e8f0",
    "--style-box-shadow-distance-x": 0,
    "--style-box-shadow-distance-y": 4,
    "--style-box-shadow-blur": 12,
    "--style-box-shadow-spread": 0,
    "--style-box-shadow-color": "rgba(0, 0, 0, 0.1)",
    "--style-box-shadow-distance-x--unit": "px",
    "--style-box-shadow-distance-y--unit": "px",
    "--style-box-shadow-blur--unit": "px",
    "--style-box-shadow-spread--unit": "px",
    "border-radius--unit": "px"
  },
  "children": []
}

Separate Corner Radii

To set different radii for each corner:

JSON

{
  "attrs": {
    "style": {
      "border-top-left-radius": 8,
      "border-top-right-radius": 8,
      "border-bottom-left-radius": 0,
      "border-bottom-right-radius": 0
    }
  },
  "params": {
    "separate-corners": true,
    "border-top-left-radius--unit": "px",
    "border-top-right-radius--unit": "px",
    "border-bottom-left-radius--unit": "px",
    "border-bottom-right-radius--unit": "px"
  }
}