Container

Overview

The Container block is a fundamental building block that serves as a flexible wrapper for organizing and styling content. It can hold any theme or app blocks and provides extensive customization options for spacing, colors, borders, backgrounds, positioning, and layout. Think of it as a versatile box that can be styled in countless ways to group related content, create visual sections, add backgrounds, and control how content appears and behaves on your pages.

The Container block is used extensively throughout the theme to create structured layouts, organize content, and apply consistent styling to groups of blocks. It's the foundation for building complex layouts while maintaining flexibility and design consistency.

Common use cases

• Group related blocks with consistent spacing and styling

• Create visually distinct sections with background colors or images

• Build card-like layouts with borders, radius, and padding

• Organize content within accordions, dropdowns, and other nested structures

• Create clickable card sections by adding a URL

• Implement sticky navigation bars or headers

• Build overlay content that appears on top of other elements

• Create hover-reveal content with the "Show on hover" option

• Control responsive layouts with device-specific visibility settings

• Add scroll-triggered animations to content sections

Compatible blocks

The following blocks can be nested within this block:

• All theme blocks

• App blocks

Block settings

General

Setting	Description	Options
Show advanced settings	Reveals 14 advanced options including top spacing, bottom spacing, and more	Checkbox (default: false)

Content

Setting	Description	Options
URL	Optional URL to make the entire container clickable	URL input
Enable background image or video	Enables background image or video settings	Checkbox (default: false)
Image background desktop	Desktop background image	Image picker Visible when enable background image or video is true
Image background mobile	Mobile background image	Image picker Visible when enable background image or video is true
Video background	Background video	Video picker Visible when enable background image or video is true
Show video on mobile	Displays video on mobile devices	Checkbox (default: true) Visible when enable background image or video is true
Show entire image	Shows the full image without cropping	Checkbox (default: false) Visible when enable background image or video is true

Spacing

Setting	Description	Options
Top spacing	Spacing above the container	0 - 300 px (default: 0) Visible when Show advanced settings is on
Bottom spacing	Spacing below the container	0 - 300 px (default: 0) Visible when Show advanced settings is on
Enable horizontal padding	Adds horizontal padding inside the container	Checkbox (default: false)
Enable vertical padding	Adds vertical padding inside the container	Checkbox (default: false)
Enable margin	Adds margin around the container	Checkbox (default: false)
Gap size	Spacing between child blocks	• None • Default (default) • Xs • Sm • Md • Lg • Xl

Color

Setting	Description	Options
Color scheme	Controls the background color scheme	• Body (default) • Neutral • Accent 1 • Accent 2 • Accent 3 • Shade 1 • Shade 2 • Shade 3 • Primary • Secondary • Tertiary • Blur • Transparent
Border color	Controls the border color	• Body • Subtle (default) • Strong • Primary • Secondary • Tertiary • None Visible when border position is not empty
Enable color difference	Applies color blend mode for overlay effects	Checkbox (default: false) Visible when Show advanced settings is on

Style

Setting	Description	Options
Border position	Controls which sides have borders	• None (default) • Top • Bottom • Left • Right • Top and bottom • Left and right • All
Radius	Controls the border radius	• None • Default (default) • Sm • Md • Lg • Xl • 2xl • Full
Enable crop	Clips content that overflows the container	Checkbox (default: true) Visible when Show advanced settings is on
Enable shadow	Adds a drop shadow to the container	Checkbox (default: false) Visible when Show advanced settings is on

Layout

Setting	Description	Options
Width	Controls the width of the container	5 - 100 % (default: 100)
Margin	Outer margin around the container	• Default • Narrow • Standard • Wide • Full • None (default) Visible when Show advanced settings is on
Minimum height	Minimum height of the container	0 - 1200 px (default: 0) Visible when enable height fill is false
Enable height fill	Fills the container to the height of the parent	Checkbox (default: true)
Enable overlay	Positions the container as an absolute overlay	Checkbox (default: false) Visible when Show advanced settings is on
Show on hover	Only displays the container on hover	Checkbox (default: false) Visible when Show advanced settings is on
Enable block elevation	Increases z-index for sticky positioning	Checkbox (default: false) Visible when enable sticky layout is true Visible when Show advanced settings is on
Enable sticky layout	Makes the container stick to viewport while scrolling	Checkbox (default: false) Visible when Show advanced settings is on
Sticky position	Position where the container sticks	• None (default) • Top • Bottom Visible when enable sticky layout is true Visible when Show advanced settings is on and Enable sticky layout is on
Vertical alignment	Controls vertical alignment of content	• Top (default) • Middle • Bottom

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only Visible when Show advanced settings is on
Load animation	Animation when the block first loads	• None (default) • Fade • Fade up • Offset fade • Offset fade up Visible when Show advanced settings is on and Scroll animation is None
Scroll animation	Adds scroll-based animations to the block	• None (default) • Fade • Slide up • Slide down • Slide left • Slide right • Zoom Visible when Show advanced settings is on and Load animation is None