---
title: "Layout Components Properties"
slug: "containers-components-properties"
updated: 2023-12-20T06:31:18Z
published: 2023-12-20T06:31:18Z
canonical: "kb.easysend.io/containers-components-properties"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://kb.easysend.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Layout Components Properties

## Layout Components Properties

The following sections detail the properties of the Layout section components:

- Container
- Grid
- Progress Bar
- Greeting Page
- Thank you Page
- Main Page
- Accordion

NOTEIf you want to skip to our How to Videos section and quickly learn how to use Layout components, click [here](/v1/docs/containers-components-properties#how-to-videos).

### Container Properties

After adding the Container component to the canvas, configure its properties, design its look, and connect it to the Model. **Figure 1** and **Table 1** describe the properties of the Container component:

![ Container Properties Section.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1692598253830.png)

**Figure 1: Container Properties Section**

**Table 1: Container Properties Section**

| **Number** | **Icon** | **Name** | **Description** |
| --- | --- | --- | --- |
| 1 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/containers-components-properties-image-filt5ik1.png) | Model | Enables to connect the component to the Model by: - Clicking the icon - Creating a new transaction data item NOTE - For additional details on how to connect the component to the Model, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) articles - For additional details on how to create a new transaction data item using the Properties section, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) articles |
| 2 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/containers-components-properties-image-ykmeyxh5.png) | Background Color | Enables to select a background color for the component NOTE The background color is selected from a color palette or from the Theme of the Webflow. For additional information about Themes, see the [Themes Overview](/v1/docs/themes-overview) article |
| 3 | - | Padding Top | Enables to add top padding to the component |
| 4 | - | Padding Right | Enables to add right padding to the component |
| 5 | - | Padding Bottom | Enables to add bottom padding to the component |
| 6 | - | Padding Left | Enables to add left padding to the component |
| 7 | - | Mobile Padding Top | Enables to add top padding to the component NOTE The padding will be effective when viewing the process on a mobile device |
| 8 | - | Mobile Padding Right | Enables to add right padding to the component NOTE The padding will be effective when viewing the process on a mobile device |
| 9 | - | Mobile Padding Bottom | Enables to add bottom padding to the component NOTE The padding will be effective when viewing the process on a mobile device |
| 10 | - | Mobile Padding Left | Enables to add left padding to the component NOTE The padding will be effective when viewing the process on a mobile device |
| 11 | - | Max Height | Enables to set the maximum height of the component in: - Pixels (px) - % |
| 12 | - | Advanced | Displays advanced properties NOTE For additional information, click [here](/v1/docs/containers-components-properties#container-advanced-properties). |
| 13 | - | Accessibility | Displays accessibility properties NOTE For additional information, click [here](/v1/docs/containers-components-properties#container-accessibility-properties). |
| 14 | - | + Add to Agent | Enables to add the component to the Agent screen NOTE This button will only appear if the Journey Sender feature is enabled, for additional information, see the [Journey Sender](/v1/docs/journey-sender) article |
| 15 | - | Delete | Enables to delete the component NOTEDeleting a Container component that contains other components will delete them as well |

### 

### Container Advanced Properties

Some properties, that are not so common, will be available under the Advanced dropdown. **Figure 2** and **Table 2** describe the properties located under the Advanced dropdown.

NOTEThe availability of the Advanced dropdown and the properties located under it, depend on the Theme used in your environment.

![Container Advanced Properties.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1692599360133.png)

**Figure 2: Container Advanced Properties**

**Table 2: Container Advanced Properties**

| **Number** | **Icon** | **Name** | **Description** |
| --- | --- | --- | --- |
| 1 | - | Border radius | Enables to set the border radius in: - Points (pt) - % |
| 2 | - | Left outer line | - When checked - enables to emphasize the left outer line of the component - When not checked - disables the possibility to emphasize the left outer line of the component |
| 3 | - | Right outer line | - When checked - enables to emphasize the right outer line of the component - When not checked - disables the possibility to emphasize the right outer line of the component |
| 4 | - | Top outer line | - When checked - enables to emphasize the top outer line of the component - When not checked - disables the possibility to emphasize the top outer line of the component |
| 5 | - | Bottom outer line | - When checked - enables to emphasize the bottom outer line of the component - When not checked - disables the possibility to emphasize the bottom outer line of the component |
| 6 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/containers-components-properties-image-fu5rpyc7.png) | outer line color | Enables to select the color of the outer line NOTEThe background color is selected from a color palette or from the Theme. For additional information about Themes, see the [Themes Overview](/v1/docs/themes-overview) article |
| 7 | - | outer line width | Enables to set the width of the outer line in: - Points (pt) - % |

### Container Accessibility Properties

EasySend incorporates accessibility enhancements into the Container component to facilitate the grouping of related components, thereby improving the usability of forms for all users. This grouping can be established visually and in the code, ensuring that assistive devices can effectively associate related form controls. The Accessibility section contains the option to mark the container as a group along with several properties related to the design of the title, and the title element functions as a clear heading to identify the group. **Figure 3** and **Table 3** describe the properties located under the Accessibility dropdown.

![Container Accessibility Properties.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1692600824277.png)

**Figure 3: Container Accessibility Properties**

**Table 3: Container Accessibility Properties**

| **Number** | **Icon** | **Name** | **Description** |
| --- | --- | --- | --- |
| 1 | - | Form Group | - When checked - sets the Container as a form group - When not checked - the Container is not set as a form group |
| 2 | - | Title Text | Enables to set the title text |
| 3 | - | Title Text Direction | Enables to set the text direction of the component: - Auto (default) - Right to left (Rtl) - Left to right (Ltr) |
| 4 | - | Title Font Family | Enables to set the font family of the title text NOTEThe font family options will appear according to the selected Theme |
| 5 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/containers-components-properties-image-fu5rpyc7.png) | Title Font Color | Enables to select the color of the title text NOTEThe title font color is selected from a color palette or from the Theme. For additional information about Themes, see the [Themes Overview](/v1/docs/themes-overview) article |
| 6 | - | Title Font size | Enables to select the font size of the title text |

### Grid Properties

After adding the Grid component to the canvas, configure its properties and design its look. **Figure 4** and **Table 4** describe the properties of the Grid component:

![Grid Properties Section.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1677065911047.png)

**Figure 4: Grid Properties Section**

**Table 4: Grid Properties Section**

| **Number** | **Name** | **Description** |
| --- | --- | --- |
| 1 | Edit Structure | - When checked - enables to edit the structure of the component, add, or remove rows and columns (see **Figure 5**) - When not checked - disables the option to edit the structure of the component |
| 2 | Collapse (Mobile) | - When checked - enables to automatically collapse the component on mobile view - When not checked - disables the option to automatically collapse the component on mobile view |
| 3 | V Align | Enables to set the vertical alignment of the component: - top - middle - bottom |
| 4 | Direction | Enables to set the text direction of the component: - Right to left (Rtl) - Left to right (Ltr) - Language (according to an input language that was set for your Builder platform) |
| 5 | H Spacing | Enables to set the horizontal spacing of the component |
| 6 | + Add to Agent | Enables to add the component to the Agent screen NOTE This button will only appear if the Journey Sender feature is enabled, for additional information, see the [Journey Sender](/v1/docs/journey-sender) article |
| 7 | Delete | Enables to delete the component NOTEDeleting a Container component that contains other components will delete them as wellYour content goes here |

![Editing Grid Structure.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1677066152735.png)

**Figure 5: Editing Grid Structure**

#### Grid - Cell Properties

You can also configure the properties of a grid cell and design its look. **Figure 6** and **Table 5** describe the properties of the grid cell:

![Grid Cell Properties Section.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1677066470634.png)

**Figure 6: Grid Cell Properties Section**

**Table 5: Grid Cell Properties Section**

| **Number** | **Icon** | **Name** | **Description** |
| --- | --- | --- | --- |
| 1 | - | Column Width | Enables to set the maximum width of a column in: - px - % NOTE - This option will only appear when clicking the two top grid cells - Removing the top row of the grid removes the column width option |
| 2 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/containers-components-properties-image-filt5ik1.png) | Model | Not in use |
| 3 | - | Padding Top | Enables to add top padding to the component |
| 4 | - | Padding Right | Enables to add right padding to the component |
| 5 | - | Padding Bottom | Enables to add bottom padding to the component |
| 6 | - | Padding Left | Enables to add left padding to the component |
| 7 | - | Mobile Padding Top | Enables to add top padding to the component NOTEThe padding will be effective when viewing the process on a mobile device |
| 8 | - | Mobile Padding Right | Enables to add a right padding to the component NOTEThe padding will be effective when viewing the process on a mobile device |
| 9 | - | Mobile Padding Bottom | Enables to add a bottom padding to the component NOTE The padding will be effective when viewing the process on a mobile device |
| 10 | - | Mobile Padding Left | Enables to add a left padding to the component NOTE The padding will be effective when viewing the process on a mobile device |
| 11 | - | + Add to Agent | Not in use |
| 12 | - | Delete | Not in use |

### Progress Bar

After adding the Progress Bar component configure its properties. **Figure 7** and **Table 6** describe the properties of the Progress Bar component:

![Progress Bar Component Properties Section.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1681734239623.png)

**Figure 7: Progress Bar Component Properties Section**

**Table 6: Progress Bar Component Properties Section**

| **Number** | **Icon** | **Name** | **Description** |
| --- | --- | --- | --- |
| 1 | - | Active | Enables to set what is the current active Progress Bar step |
| 2 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/other-components-properties-image-boaddj81.png) | Steps | Enables to set the steps of the Progress Bar NOTE The offset of the steps is +1 so the first step is set to 0 |
| 3 | - | + Add to Agent | Enables to add the component to the Agent screen NOTE This button will only appear if the Journey Sender feature is enabled, for additional information, see the [Journey Sender](/v1/docs/journey-sender) article |
| 4 | - | Delete | Enables to delete the component |

### Greeting Page Properties

After adding the Greeting Page component to the canvas, configure its properties, design its look, and connect it to the Model. **Figure 8** and **Table 7** describe the properties of the Main Page component:

![Greeting Page Properties Section.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1681736355998.png)

**Figure 8: Greeting Page Properties Section**

**Table 7: Greeting Page Properties Section**

| **Number** | **Icon** | **Name** | **Description** |
| --- | --- | --- | --- |
| 1 | - | Page Name | Enables to write a name for the page |
| 2 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/pages-amp-sections-components-properties-image-f26rms0i.png) | Model | Enables to connect the component to the Model by: - Clicking the icon - Creating a new transaction data item NOTE - For additional details on how to connect the component to the Model, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) articles - For additional details on how to create a new transaction data item using the Properties section, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) article |
| 3 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/pages-amp-sections-components-properties-image-yo5e6tay.png) | Logo | Enables to select an image file such as .jpg and .png to be a logo NOTE Image files must be added to the Theme of the Webflow before they are available for selection. For additional information about Themes, see the [Themes Overview](/v1/docs/themes-overview) article |
| 4 | - | Logo_Width | Enables to set the width of the logo |
| 5 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/containers-components-properties-image-ykmeyxh5.png) | Left_Bg_Color | Enables to set the background color of the left side of the screenNOTE The background color is selected from a color palette or from the Theme of the Webflow. For additional information about Themes, see the [Themes Overview](/v1/docs/themes-overview) article |
| 6 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/containers-components-properties-image-ykmeyxh5.png) | Right_Bg_Color | Enables to set the background color of the left side of the screenNOTE The background color is selected from a color palette or from the Theme of the Webflow. For additional information about Themes, see the [Themes Overview](/v1/docs/themes-overview) article |
| **7** | - | Show Button | - When checked - displays the button - When not checked - hides the button |
| 8 | - | Button Text | Enables to set the text of the button |
| 9 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/pages-amp-sections-components-properties-image-d9rqxhdf.png) | Button_Action | Enables to set the button with a built-in action or with an action customized with code: - Custom - the default value, this is not a built-in action and customization with code is needed by clicking the pencil icon (not covered in this article) - Next - navigates to the next page - Back - navigates to the previous page - Submit - submits the digital process NOTE - The built-in actions: Next, Back, and Submit can be customized with code as well, by clicking the pencil icon - After submitting the digital process there is no way to navigate back to it |
| 10 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/pages-amp-sections-components-properties-image-yo5e6tay.png) | Charachter_Image | Enables to select an image file such as .jpg and .png to be a background picture NOTE Image files must be added to the Theme of the Webflow before they are available for selection. For additional information about Themes, see the [Themes Overview](/v1/docs/themes-overview) article |
| 11 | - | + Add to Agent | Enables to add the component to the Agent screen NOTE This button will only appear if the Journey Sender feature is enabled, for additional information, see the [Journey Sender](/v1/docs/journey-sender) article |
| 12 | - | Delete | Enables to delete the component from the canvas NOTEDeleting a Greeting Page component that contains other components will delete them as well |

#### 

### 

### Thank You Page Properties

After adding the Thank You Page component to the canvas, configure its properties, design its look, and connect it to the Model. **Figure 9** and **Table 8** describe the properties of the Main Page component:

![ Thank You Page Properties Section.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1681737021247.png)

**Figure 9: Thank You Page Properties Section**

**Table 8: Thank You Page Properties Section**

| **Number** | **Icon** | **Name** | **Description** |
| --- | --- | --- | --- |
| 1 | - | Page Name | Enables to write a name for the page |
| 2 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/pages-amp-sections-components-properties-image-f26rms0i.png) | Model | Enables to connect the component to the Model by: - Clicking the icon - Creating a new transaction data item NOTE - For additional details on how to connect the component to the Model, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) articles - For additional details on how to create a new transaction data item using the Properties section, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) article |
| 3 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/pages-amp-sections-components-properties-image-yo5e6tay.png) | Logo | Enables to select an image file such as .jpg and .png to be a logo NOTE Image files must be added to the Theme of the Webflow before they are available for selection. For additional information about Themes, see the [Themes Overview](/v1/docs/themes-overview) article |
| 4 | - | Logo_Width | Enables to set the width of the logo |
| 5 | - | Logo_Width_Mobile | Enables to set the width of the logo for mobile view |
| **6** | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/containers-components-properties-image-ykmeyxh5.png) | Bg_Color | Enables to set the background color of the screenNOTE The background color is selected from a color palette or from the Theme of the Webflow. For additional information about Themes, see the [Themes Overview](/v1/docs/themes-overview) article |
| **7** | - | + Add to Agent | Enables to add the component to the Agent screen NOTE This button will only appear if the Journey Sender feature is enabled, for additional information, see the [Journey Sender](/v1/docs/journey-sender) article |
| 8 | - | Delete | Enables to delete the component from the canvas NOTEDeleting a Greeting Page component that contains other components will delete them as well |

### Main Page Properties

After adding the Main Page component to the canvas, configure its properties, design its look, configure its form buttons, set the co-browsing option, and connect it to the Model. **Figure 10** and **Table 8** describe the properties of the Main Page component:

![Main Page Properties Section.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1681738026181.png)

**Figure 10: Main Page Properties Section**

**Table 8: Main Page Properties Section**

| **Number** | **Icon** | **Name** | **Description** |
| --- | --- | --- | --- |
| 1 | - | Page Name | Enables to write a name for the page |
| 2 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/pages-amp-sections-components-properties-image-f26rms0i.png) | Model | Enables to connect the component to the Model by: - Clicking the icon - Creating a new transaction data item NOTE - For additional details on how to connect the component to the Model, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) articles - For additional details on how to create a new transaction data item using the Properties section, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) articles |
| 3 | - | Primary Button Text | Enables to set the label of the primary form button NOTE If the Primary Button Text is not set, the primary form button will not be visible |
| 4 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/pages-amp-sections-components-properties-image-d9rqxhdf.png) | Primary Button Action | Enables to set the primary button with a built-in action or with an action customized with code: - Custom - the default value, this is not a built-in action and customization with code is needed by clicking the pencil icon (not covered in this article) - Next - navigates to the next page - Back - navigates to the previous page - Submit - submits the digital process NOTE - The built-in actions: Next, Back, and Submit can be customized with code as well, by clicking the pencil icon - After submitting the digital process there is no way to navigate back to it |
| 5 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/pages-amp-sections-components-properties-image-3ljml83r.png) | Secondary Button Action | Enables to set the secondary button with a built-in action or with an action customized with code: - Custom - the default value, this is not a built-in action and customization with code is needed by clicking the pencil icon (not covered in this article) - Next - navigates to the next page - Back - navigates to the previous page - Submit - submits the digital process NOTE - The built-in actions: Next, Back, and Submit can be customized with code as well, by clicking the pencil icon - After submitting the digital process there is no way to navigate back to it |
| 6 | - | Show Secondary Button | - When checked - displays the secondary from button - When not checked - hides the secondary form button |
| 7 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/pages-amp-sections-components-properties-image-yo5e6tay.png) | Logo | Enables to select an image file such as .jpg and .png to be a logo NOTE Image files must be added to the Theme of the Webflow before they are available for selection. For additional information about Themes, see the [Themes Overview](/v1/docs/themes-overview) article |
| 8 | - | Logo width | Enables to set the width of the logo |
| 9 | - | Logo width Mobile | Enables to set the width of the logo for mobile view |
| 10 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/pages-amp-sections-components-properties-image-yo5e6tay.png) | Background Image | Enables to select an image file such as .jpg and .png to be a background picture NOTE Image files must be added to the Theme of the Webflow before they are available for selection. For additional information about Themes, see the [Themes Overview](/v1/docs/themes-overview) article |
| 11 | - | Show Cobrowsing Button | - When checked - the Main Page component displays the Co-Browsing button - When not checked - the Main Page component does not display the Co-Browsing button |
| 12 | - | Is Preview Page | - When checked - the Main Page component will be set as a preview page, the Preview component will be dragged and dropped onto it - When not checked - the Main Page component will not be set as a preview page and will not be able to contain the Preview component |
| 13 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/pages-amp-sections-components-properties-image-yo5e6tay.png) | Previewbackground Image | Enables to select an image file such as .jpg and .png to be a background picture for the preview page NOTE Image files must be added to the Theme of the Webflow before they are available for selection. For additional information about Themes, see the [Themes Overview](/v1/docs/themes-overview) article |
| 14 | - | Is Progress Bar | - When checked - if the page contains a Progress Bar component, adjusts the layout of the page when the view is mobile - When not checked -will not change the layout of the page when the view is mobile, even if the page contains a Progress Bar component |
| 15 | - | + Add to Agent | Enables to add the component to the Agent screen NOTE This button will only appear if the Journey Sender feature is enabled, for additional information, see the [Journey Sender](/v1/docs/journey-sender) article |
| 16 | - | Delete | Enables to delete the component from the canvas NOTEDeleting a Main Page component that contains other components will delete them as well |

### Accordion Properties

After adding the Accordion component to the canvas, configure its properties. **Figure 11** and **Table 9** describe the properties of the Main Page component:

![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1700979651020.png)

**Figure 11: Main Page Properties Section**

**Table 9: Main Page Properties Section**

| **Number** | **Icon** | **Name** | **Description** |
| --- | --- | --- | --- |
| 1 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/pages-amp-sections-components-properties-image-f26rms0i.png) | Model | Enables to connect the component to the Model by: - Clicking the icon - Creating a new transaction data item NOTE - For additional details on how to connect the component to the Model, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) articles - For additional details on how to create a new transaction data item using the Properties section, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) articles |
| 2 | - | Title | Enables to set the label of the component |
| 3 | - | Initial Expended | - When clicked - the Accordion component will be expended automatically when the digital process is initiated - When not clicked - the Accordion component will not be expended automatically when the digital process is initiated |
| 4 | - | Alignment | Enables to set the alignment of the component: - Auto (default) - Right to left (Rtl) - Left to right (Ltr) |
| 5 | - | + Add to Agent | Enables to add the component to the Agent screen NOTE This button will only appear if the Journey Sender feature is enabled, for additional information, see the [Journey Sender](/v1/docs/journey-sender) article |
| 6 | - | Delete | Enables to delete the component from the canvas |

## How to Videos

To quickly learn how to use Container components watch the following videos.

- Container Component:

[Embedded content](https://www.youtube.com/embed/CSMu7ogy660?&wmode=opaque&rel=0)

- Grid Component:

[Embedded content](https://www.youtube.com/embed/6FZWBfmBy9w?&wmode=opaque&rel=0)

- Greeting Page:

[Embedded content](https://www.youtube.com/embed/3mWo1Pkw4zc?&wmode=opaque&rel=0)

- Main Page:

[Embedded content](https://www.youtube.com/embed/lecAuYOJW2U?&wmode=opaque&rel=0)