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