The Avonni Container component provides a visually appealing foundation for your content. Whether you aim for a refined card-like appearance, a boxed layout, or a more standard presentation, this component effortlessly adapts.

This component leverages slots for advanced customization, making it ideal for LWR sites. Aura sites do not support this level of customization.

🎥 Tutorials


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.


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.




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.

Last updated