Containers Components Properties

Contact support

Containers Components Properties

Article Summary

The following sections detail the properties of the Containers section components. The Containers components are:

Container
Grid

NOTE

If you want to skip to our How to Videos section and quickly learn how to use the Container components, click here.

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:

Figure 1: Container Properties Section

Table 1: Container Properties Section

Number	Icon	Name	Description
		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 and the 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 and the Setting Up the Model articles
		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 article
	-	Border radius	Enables to set the border radius in: Points (pt) %
	-	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
	-	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
	-	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
	-	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
		outer line color	Enables to select the color of the outer line NOTE The background color is selected from a color palette or from the Theme. For additional information about Themes, see the Themes Overview article
	-	outer line width	Enables to set the width of the outer line in: Points (pt) %
	-	Padding Top	Enables to add top padding to the component
	-	Padding Right	Enables to add right padding to the component
	-	Padding Bottom	Enables to add bottom padding to the component
	-	Padding Left	Enables to add left padding to the component
	-	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
	-	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
	-	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
	-	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
	-	Max Height	Enables to set the maximum height of the component in: Pixels (px) %
	-	+ 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 article
	-	Delete	Enables to delete the component NOTE Deleting a Container component that contains other components will delete them as well

Grid Properties

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

Figure 2: Grid Properties Section

Table 2: Grid Properties Section

Number	Name	Description
	Edit Structure	When checked - enables to edit the structure of the component, add, or remove rows and columns (see Figure 3) When not checked - disables the option to edit the structure of the component
	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
	V Align	Enables to set the vertical alignment of the component: top middle bottom
	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)
	H Spacing	Enables to set the horizontal spacing of the component
	+ 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 article
	Delete	Enables to delete the component NOTE Deleting a Container component that contains other components will delete them as well Your content goes here

Figure 4: Editing Grid Structure

Grid - Cell Properties

You can also configure the properties of a grid cell and design its look. Figure 4 and Table 3 describe the properties of the grid cell:

Figure 4: Grid Cell Properties Section

Table 3: Grid Cell Properties Section

Number	Icon	Name	Description
	-	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
		Model	Not in use
	-	Padding Top	Enables to add top padding to the component
	-	Padding Right	Enables to add right padding to the component
	-	Padding Bottom	Enables to add bottom padding to the component
	-	Padding Left	Enables to add left padding to the component
	-	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
	-	Mobile Padding Right	Enables to add a right padding to the component NOTE The padding will be effective when viewing the process on a mobile device
	-	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
	-	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
	-	+ Add to Agent	Not in use
	-	Delete	Not in use