> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/container.md).

# Container

The Container is a flexible wrapper used to group and visually structure content. Drop other Avonni Dynamic Components inside it to organize them, apply shared styling, and control their visibility as a single unit.

## Overview

The Container acts as a wrapper for other components, providing several key benefits:

### Organization and Structure

* **Grouping:** Logically group related components together. This improves the organization of your Dynamic Component and makes it easier to understand and maintain.
* **Visual Hierarchy:** Create a clear visual hierarchy by grouping elements within containers. This helps users understand the relationships between different parts of your UI.

### Styling and Layout

* **Consistent Styling:** Apply styles (colors, borders, padding, etc.) to the Container, which will be applied to *all components within* the container. This ensures visual consistency and saves you from having to style each component individually.
* **Layout Control:** Control the layout of the contained components. You can often set properties on the Container to control alignment, spacing, and other layout aspects.
* **Background and Borders:** Easily add background colors or borders around a group of components.

### Flexibility and Reusability

* **Easy Movement/Duplication:** Move or duplicate an *entire group* of components simply by dragging or copying the Container. This is much easier than moving each component individually.
* **Component Nesting:** You can even nest Containers *within* other Containers, creating complex and hierarchical layouts.

### Inherited Visibility

* **Simplified Visibility Control:** A *crucial* feature of the Container is that it [controls the visibility](/dynamic-components/core-concepts/component-visibility.md) of its contained components. If you set the Container's `Visible` property to `false` (or bind it to a condition that evaluates to `false`), *all components inside the Container will be hidden*, regardless of their individual `Visible` settings. This simplifies managing the visibility of entire sections of your UI.

In essence, the Container component provides a powerful way to group, style, organize, and control the visibility of multiple components, leading to more maintainable and visually appealing Dynamic Components.

## Configuration

The Container has a single slot where you can drag and drop any other Avonni Dynamic Component. This allows you to create complex layouts and group related components together. For example, you could drag multiple components into a Container to create a section with a specific background color or image.

<figure><img src="/files/z6fnGnqii0leQuEntZaV" alt=""><figcaption><p>How to place another component inside the container</p></figcaption></figure>

To configure the Container, select it on the canvas. The **Edit Container** panel opens on the right with two tabs: **Properties** and **Style**. The sections below mirror the Properties tab.

### Properties

#### Variant

The **Variant** setting changes the overall appearance of the container. Choose a visual style:

* **Standard (Default):** A basic container with no additional styling.
* **Box:** Adds a subtle border and padding.
* **Card:** Creates a card-like container with a shadow effect.

#### Background Image

Use the **Background Image** setting to give the container a background. Provide an image URL or an expression, or click **Select Image** to upload a file. Supported formats include APNG, AVIF, GIF, JPG/JPEG, PNG, SVG, and WebP.

#### Overlay Color

The **Overlay Color** setting applies a color overlay on top of the background image. Opacity can be adjusted to control the intensity of the overlay, which is useful for enhancing the readability of content placed over the image or creating a specific visual effect.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Use Cases

{% content-ref url="/spaces/dHOej9Pd5IxJNGEJMZKW/pages/9sEBLKlcd755E6HDFStc" %}
[User Activity Report](/projects/dynamic-components/working-with-data/user-activity-report.md)
{% endcontent-ref %}

## Styling

The **Style** tab gives you fine-grained control over the Container's appearance. Configure it from the **Style** tab of the Edit Container panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the container, creating space between it and other elements on the page.

* **Top / Right / Bottom / Left:** Adjust the space on each side of the container.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the container's border and the components placed inside it.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Size" %}
Controls the container's dimensions.

* **Width / Height:** Set fixed dimensions for the container.
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
* **Overflow:** Control how content that exceeds the bounds is handled.
  {% endtab %}

{% tab title="Border" %}
Customizes the border surrounding the container.

* **Color:** Set the border color.
* **Size:** Adjust the border thickness.
* **Style:** Choose a border style (e.g. solid, dashed, dotted).
* **Radius:** Control the roundness of the corners.
  {% endtab %}

{% tab title="Background" %}
Sets the container's background fill.

* **Color:** Set the background color.
* **Size:** Control how a background image is sized.
* **Alignment:** Position the background image within the container.
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/container.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.