CMS

Container

Layout primitive that wraps a backdrop with grid, alignment, and media-sizes configuration.

Overview

Container is the layout primitive that wraps a Backdrop with grid, alignment, and media-sizes configuration. It exposes column counts for mobile and desktop independently, configurable sizing and alignment, and three slots (top, default, bottom) so editors can compose arbitrary content inside any backdrop.

Reach for Container whenever you need to host slot-based content with a backdrop. Sections that don't need slots can compose Backdrop directly.

Key Business & UX Benefits

One layout primitive backs every CMS section, keeping spacing, columns, and backdrops consistent across the storefront.
Independent mobile and desktop column counts protect mobile readability without forcing designers into media-query gymnastics.
Three slot regions (top, default, bottom) let editors arrange any content inside any backdrop, removing the need for bespoke section components.
Configurable sizing and alignment match the parent layout, so campaign pages stay on-grid as content evolves.

Pro-Tip from Larry: Use Container whenever you need to host slot-based content with a backdrop; sections that don't need slots can compose Backdrop directly.

Usage

Container Default

<Container
    :columns-desktop="3"
    :columns-mobile="1"
    container-style="boxed"
    background="solid"
  >
    <slot />
  </Container>

Feature List

Independent column counts for mobile and desktop protect mobile readability without media-query gymnastics
Three slot regions ('top', 'default', 'bottom') let editors arrange any content inside any backdrop
Wraps a Backdrop with grid, alignment, and media-sizes configuration in one primitive
Configurable sizing and alignment keep campaign pages on-grid as content evolves
Hosts slot-based content with a backdrop, removing the need to fork section components per layout
Sections without slot composition can compose Backdrop directly, keeping the primitive layered

API Reference

Prop	Default	Type
`containerStyle`	`full-width`	`ContainerStyle ("full-width" \| "boxed")` Outer container style — `full-width` bleeds edge-to-edge, `boxed` is clamped to the theme max-width.
`background`	`none`	`BackdropBackground ("default" \| "none" \| "pale" \| "solid" \| string)` Themed background preset. Falls through to Backdrop.
`customBackground`		`string` Custom background CSS value (only applied when background supports it — pass pre-resolved CSS).
`margin`		`ContainerSpacing ("s" \| "m" \| "l")` Vertical spacing outside the container.
`padding`		`ContainerSpacing ("s" \| "m" \| "l")` Vertical spacing inside the container.
`columnsMobile`	`1`	`number` Number of grid columns on mobile breakpoints.
`columnsDesktop`	`1`	`number` Number of grid columns on desktop breakpoints.
`sizing`	`fixed`	`ContainerSizing ("fixed" \| "greedy-first" \| "greedy-last")` Grid sizing strategy forwarded to GridFill.
`alignment`	`top-left`	`"top-center" \| "top-left" \| "top-right" \| "center-center" \| "center-left" \| "center-right" \| "bottom-center" \| "bottom-left" \| "bottom-right"` 2D alignment of the inner grid.

Slot	Type
`top`	`any`
`default`	`any`
`bottom`	`any`

Edit this pageorReport an issue

Brand List

A-Z grouped text-link directory of brands for "shop by brand" entry points.

Content Grid

Generic responsive grid for cards, tiles, and other slotted content.