# 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

|