Layout

Overview

The Avonni Layout component is designed to optimize and streamline content presentation on your Experience Cloud site. Offering a blend of alignment and display choices ensures your site's content is organized, responsive, and tailored to various device sizes.

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 with Avonni Components for showcasing products or features.
Configuring Avonni Layout to be responsible	Learn to create responsive, user-friendly layouts with Avonni Layout in Experience Cloud across various devices.

Properties

Name	Description	Usage
Horizontal Align	Adjust the horizontal alignment of content within the layout	Utilize this setting to ensure content aligns cohesively, maintaining a balanced and harmonized appearance across the layout.
Vertical Align	Manipulate the vertical alignment of content within the layout.	Optimize the vertical positioning of content, ensuring it is presented in a visually appealing manner that resonates with the overall design goals.
Pull to Boundary	Allow content to extend towards the boundaries of the layout.	Utilize this option to craft layouts that maximize space, enhancing the visibility and presentation of content elements.
Multiple Rows	Enable the accommodation of content across multiple rows.	Activate this feature when your layout demands the distribution of content in a vertical sequence, facilitating a structured and organized presentation.
Display as Section	Set the layout to manifest as a distinct section within the page.	Set the layout to manifest as a distinct section within the page.
Column Layout	Determine the manner in which content is displayed within columns.	Customize the column configuration to establish a grid-like structure, fostering a systematic and neat arrangement of content for enhanced visual navigation.

Column Layout Settings

The Column Layout settings provide flexibility in organizing page content, ensuring it adapts responsively to different screen sizes and devices while maintaining a clean, structured appearance.

Type

Determines the nature of the column layout.

• Options:

  • Flexible: Columns in this layout type adjust their size dynamically based on the content and the available screen space. This option is ideal for responsive designs where the layout needs to adapt to various device sizes.

  • Fixed: This option maintains a constant size for the columns, regardless of the screen size or content volume. Fixed columns are helpful when a uniform and consistent layout is required.

• Usage: Choose Flexible for fluid layouts that need to adjust to different screen sizes, and Fixed for layouts that require consistency in column widths.

Size

Sets the width of the columns within the grid. The grid system is typically based on a 12-unit structure.

• Range: 1 to 12, where each unit represents a proportion of the total available width.

• Usage: Assign a size to define how much space each column should occupy. For instance, setting a size of 4 in a 12-unit grid would mean the column takes up one-third of the available horizontal space.

Alignment Bump

Adjusts the position of the column within its container.

• Options:

  • Left: Shifts the column towards the left edge of the container.

  • Right: Moves the column towards the right edge.

  • Top: Aligns the column closer to the top of the container.

  • Bottom: Positions the column near the bottom of the container.

• Usage: Use this setting to fine-tune the position of columns relative to their surroundings, enhancing the layout's visual appeal and spatial balance.

Padding

Controls the internal spacing of the column.

• Options:

  • Horizontal: Adjusts padding on the left and right sides of the column.

  • Around: Adds padding on all sides of the column.

• Usage: Apply padding to create space within the column, ensuring the content is not flush against the edges, improving readability and visual aesthetics.

The column layout settings of the Avonni Layout Component are essential for creating polished and functional layouts in Salesforce Experience Cloud sites.