# Container

## Combobox Tutorial Examples

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

***

## Setting Up **Your Container**

### **1. Drag the Container and drag other components inside**

The Container component 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>

### **2. Customize the Container**

* **Variant:** Choose a visual style for the container:
  * **Standard:** 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:** Upload an image for the container's background.
* **Overlay Color:** Add a semi-transparent overlay color to the background image to enhance readability or create a specific visual effect.

## **Why Use the Container Component?**

The container component is an excellent component block for creating well-structured and visually appealing layouts for Avonni Dynamic Components. It 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.


---

# Agent Instructions: 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.