Page Structure:
Page Structure:
The Columns component creates a two-column layout with left and right content areas. On smaller screens, the columns stack vertically. It supports configurable column sizing (fixed or flex), gap between columns, and padding options.
Columns have a config section with options for controlling layout and appearance.
Background Color: Sets the background color of the columns section (hex format)
Padding: Top and bottom padding, in 10px increments
Padding Top: Top padding only, in 10px increments
Padding Bottom: Bottom padding only, in 10px increments
Column Gap: The space between the columns, in 10px increments
Height: Controls how the columns interact with available page space (grow, shrink, or fit)
Left Column Size: CSS value for the left column width (e.g., 20rem, 30%). Cannot be used with Right Column Size.
Right Column Size: CSS value for the right column width (e.g., 20rem, 30%). Cannot be used with Left Column Size.
Analytics Label: Analytics events from within this section will include this label
ID: The HTML id of the section, can be referenced by anchor links
This is the left side of a basic two-column layout. Both columns share equal space by default.
This is the right side. On mobile, the columns will stack vertically.
This left column has a fixed width of 20rem, creating a sidebar-style layout.
The right column takes up the remaining space, flexing to fill the available width.
This layout has a larger gap of 6 (60px) between the columns.
Notice the extra space between this column and the one on the left.
Columns can have a background color applied to the entire section.
The background color spans across both columns and the gap between them.