Containers Overview

CF2 uses a container hierarchy to organize page content. Understanding this structure is essential for building pages.

Container Hierarchy

ContentNode (root - page background) └── SectionContainer/V1 (full-width section) ├── RowContainer/V1 (horizontal layout, fixed width) │ └── ColContainer/V1 (12-grid column) │ └── Elements OR FlexContainer/V1 └── FlexContainer/V1 (can be direct child of Section) └── Elements
i
Rules:
  • ContentNode can only contain SectionContainer children
  • SectionContainer can contain RowContainer or FlexContainer
  • RowContainer must contain ColContainer children
  • ColContainer contains Elements or FlexContainer
  • FlexContainer contains Elements only (no nested containers)

Container Types

SectionContainer

Full-width sections with background, border, shadow, and corners support.

RowContainer

Fixed-width horizontal containers that hold columns.

ColContainer

12-grid columns for responsive layouts.

FlexContainer

Modern flexbox layout for flexible element arrangement.

Feature Support

All containers support background, border, shadow, and corners:

Container Background Border Shadow Corners
ContentNode Yes No No No
SectionContainer Yes Yes Yes Yes
RowContainer Yes Yes Yes Yes
ColContainer Yes Yes Yes Yes
FlexContainer Yes Yes Yes Yes

Common Style Patterns

Background

JSON 
{
  "params": {
    "--style-background-color": "rgba(255, 255, 255, 1)",
    "--style-background-image-url": ""
  },
  "attrs": {
    "data-skip-background-settings": "false"
  }
}

Border

JSON 
{
  "params": {
    "--style-border-style": "solid",
    "--style-border-width": 1,
    "--style-border-width--unit": "px",
    "--style-border-color": "#000000"
  }
}

Shadow

JSON 
{
  "params": {
    "--style-box-shadow-distance-x": 0,
    "--style-box-shadow-distance-y": 4,
    "--style-box-shadow-blur": 6,
    "--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"
  },
  "attrs": {
    "data-skip-shadow-settings": "false"
  }
}

Corners

JSON 
{
  "attrs": {
    "style": { "border-radius": 8 },
    "data-skip-corners-settings": "false"
  },
  "params": {
    "border-radius--unit": "px"
  }
}