# AX - Container ## Overview **AX - Container** is an Experience Cloud component that wraps other components in a styled container with borders, backgrounds, and padding on Experience Sites pages. Use it to group related content together, create visual sections, add background colors or images, or apply consistent spacing around components. Drag and drop any Experience Cloud components inside the container to build grouped layouts in Experience Builder. Perfect for creating visual sections, grouping form fields, adding branded backgrounds, organizing dashboard widgets, or anywhere your portal needs content wrapped in a styled container. {% hint style="danger" %} This component [leverages slots](https://docs.avonnicomponents.com/experience-cloud/getting-started/learning-the-basics#understanding-slots) for advanced customization, making it ideal for LWR sites. Aura sites do not support this level of customization. {% endhint %} ## Tutorials | Name | Description | | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | [**Create a grid layout**](https://docs.avonnicomponents.com/experience-cloud/tutorials/use-cases/creating-a-grid-layout) | Learn to create a dynamic grid layout for showcasing products with interactive 'Learn More' buttons. | ## Maximizing Your Site's Potential with Avonni Container ### Versatile Design Options for Every Need The Avonni Container component stands out with its array of style variants - Card, Box, and Standard - each designed to cater to different content needs. * The **`Card`** variant is perfect for eye-catching sections like testimonials, adding flair to your content.

* The **`Box`** variant shines when it comes to emphasizing products or key features, making them stand out.

* The **`Standard`** variant offers a clean and cohesive look for more conventional content, maintaining harmony across your site.

### Dynamic Visuals to Elevate Your Site With Avonni Container, you can bring life to various sections through unique background images. Envision adding vibrant team photos to your 'About Us' section or depicting serene landscapes for sustainability topics. These dynamic visuals enhance the aesthetic appeal and help communicate your brand's story more effectively. ### Readability Meets Style Ensuring content stands out against busy or colorful backgrounds is crucial in web design. Avonni Container tackles this challenge with the use of overlay colors. Imagine a dark overlay on a festive background, making your event details pop, or a subtle tint that adds depth to your content while maintaining readability. ### Full Control Over Presentation Avonni Container provides extensive control over each section's size, background, and borders. This means you can fine-tune how your content occupies space, adapt background colors or images to fit your theme and adjust border settings for additional definition. Each of these elements plays a pivotal role in enhancing the visual structure of your page. ### Adaptability for Diverse Audiences In today's digital landscape, catering to various audience needs is key. Avonni Container is designed with this adaptability in mind. Whether using the Card style for news sections in partner portals or the Box style for highlighting special offers in customer hubs, this component ensures your content is seen and resonates with your audience. ### Recap The Avonni Container component is more than just a tool; it’s a canvas for creativity and a solution for diverse web design challenges when using Experience Cloud. Its versatility, dynamic visual capabilities, readability enhancements, and adaptable content display options make it indispensable for any Salesforce Experience Cloud site. Whether you aim to captivate, inform, or engage, Avonni Container empowers you to do it all with style and efficiency. ## Settings {% tabs %} {% tab title="🎛️ Properties" %} | Name | Description | Usage | | -------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | **Variant** |

Choose a style variant to define the overall appearance of the container.
Learn more

| Select a variant that aligns with your design vision, whether you prefer a straightforward, boxed, or card-like presentation of your content. | | **Background Image** | Set a background image for the container. | Upload or provide a URL for an image that enhances the visual appeal of the container, contributing to the mood or thematic tone you wish to convey. | | **Overlay Color** | Apply a color overlay on top of the background image. | Choose a color that subtly overlays the background image, helping to maintain the visibility and readability of the content within the container. | | {% endtab %} | | | {% tab title="Variant Definition" %} The **`Variant`** property of the Avonni Container component is a crucial feature that defines the fundamental style and structure of the container, setting the stage for how content within it is displayed and interacted with. Here's a detailed explanation of each variant: **Standard** * **Description:** The **`standard`** variant offers a basic and minimalistic style. The default setting provides a clean and straightforward container without additional stylistic elements. This variant is ideal for content that requires a simple layout without the need for extra visual emphasis.

* **Usage:** Use the **`standard`** variant when you need an uncomplicated and clean presentation. It's perfect for cases where the content needs to stand out without additional styling from the container. This variant suits informational blocks, text-heavy sections, or when you want the focus purely on the content rather than the container. **Box** * **Description:** The **`box`** variant adds more definition to the container, usually through borders or slight shadowing, giving the appearance of the content being 'boxed in'. This variant creates a sense of depth and emphasis, making it stand out more prominently on the page.

* **Usage:** Opt for the **`box`** variant when you want to draw more attention to the container, such as for featured content or important notices, or when you want to segregate different page sections visually. The boxed style is beneficial in layouts where multiple container elements need a distinct separation or when creating a dashboard-like interface. **Card** * **Description:** The **`card`** variant transforms the container into a card-style layout, typically characterized by shadowing (giving a floating effect), rounded corners, and possibly a more pronounced border.

* **Usage:** The **`card`** variant is ideal for discrete blocks of content that need individual focus, such as profiles, product descriptions, or interactive elements. It’s an excellent choice for creating a visually appealing grid of options or information blocks, where each card holds a piece of content that is part of a larger collection. This variant is particularly effective in responsive designs, as cards can rearrange gracefully on different screen sizes. #### Summary Choosing the right **`Variant`** for the Avonni Container is about matching the style of the container with the purpose of your content and the overall aesthetic of your page. Whether you go for the unadorned simplicity of **`standard`**, the defined boundaries of **`box`**, or the modern appeal of **`card`**, each option provides a unique way to frame and emphasize your content within the Salesforce Experience Cloud environment {% endtab %} {% tab title="🎨 Styling" %} | Name | Description | Usage | | -------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | **Padding** | Adjust the internal spacing of the container. | Define the padding values to ensure the container’s content has appropriate spacing from the edges, enhancing readability and aesthetics. | | **Size** | Configure the dimensions of the container and its content overflow behavior. | Set specific width and height values and determine how the container should handle content that exceeds its dimensions (overflow). | | **Background** | Customize the background by setting a color, and adjusting the size and alignment of the background image. | Configure these settings to achieve the desired visual impact and alignment of the background relative to the container’s content. | | **Border** | Define the appearance of the container’s border. | Customize the border by selecting its size, style, color, and corner radius, ensuring it complements the overall design of the container. | {% endtab %} {% endtabs %}