Container

Overview

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

Name	Description
Create 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

🎛️ 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.

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.

Standard examples

• 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.

Box examples

• 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.

Card Exmaples

• 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

🎨 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.