Containers

Component

Containers

Two components that work together but do different jobs. Layout Container builds the structure — it decides how many columns a section has and how much space sits above and below it. Container styles the surface — it wraps content inside a column in a padded, colored, rounded, or gradient box. Grid first, then the box: Layout Container makes the row, Container dresses the cell. Every demo band below is the real component.

Jump to: Layout Container · Container

Layout Container

Always wrap content, components, and containers in a Layout Container. Never nest a Layout Container inside another Layout Container. Containers go inside Layout Containers.

The row. Sets columns (1–4), section padding and margins, gutters, full-width behavior, and an optional background band. Every section of a page starts with one.

Container

The box. Wraps content inside a column with per-breakpoint padding, a background color or gradient, corner radius, and match-height. Always lives inside a Layout Container.

Layout Container

Option	Property	Values / Behavior
One Column	`columnLayout: "1"`	Single full-width column — the default
Two Column	`columnLayout: "2"`	Children split into 2 responsive columns
Three Column	`columnLayout: "3"`	3 responsive columns
Four Column	`columnLayout: "4"`	4 responsive columns
Background Color	`backgroundColor`	Hex value fills the section band
Padding / Margin	`paddingTop, paddingBottom, marginTop, marginBottom`	none, xxsmall, xsmall, small, medium (Medium = Mobile 32px / Desktop 48px)
Remove Gutters	`noGutters`	Drops the column gutters
Full Width	`fullWidth`	Breaks out of the page max-width
ID	`id`	HTML id — powers anchor links like the ones in this table

Container

Option	Property	Values / Behavior
Background + Padding	`backgroundColor, mobilePadding…largeDesktopPadding`	Hex fill; padding set in px per breakpoint (mobile / tablet / desktop / large desktop)
Corner Radius	`radiusTopLeft, radiusTopRight, radiusBottomLeft, radiusBottomRight`	Per-corner radius in px — demo uses 48px on three corners
Gradient	`gradientValue`	Full CSS gradient string, e.g. linear-gradient(120deg, …)
Match Height	`matchHeight`	Equalizes heights across siblings in a multi-column row
Z-Index	`zIndex`	Stacking order for overlap treatments

Layout Container: One Column

Single Column

Layout Container: Two Column

Column 1

Column 2

Layout Container: Three Column

Column 1

Column 2

Column 3

Layout Container: Four Column

Column 1

Column 2

Column 3

Column 4

Layout Container: Background Color #E5EEF2

Column 1

Column 2

Container: Background + Padding

Container
Background #E5EEF2, Padding 32 32 32 32, Radius 16 16 16 16

Container: Corner Radius

Container
48px radius on three corners (radiusTopLeft, radiusBottomLeft, radiusBottomRight).

Container: Background Gradient

Container (with Gradient)
gradientValue accepts a full CSS gradient string — this is the brand blue-to-green at 120°

linear-gradient(120deg, rgba(0,155,215,1) 0%, rgba(96,193,164,1) 65%);

Authoring Tip: Layout Container sets the grid; drop a Container inside a column when you need a styled card surface.