Step 1: This component should be authored inside a Background Container component. Click on "Drag components here" and click on + icon to add Background Container component on page.
Column Control Component
Step 2: Click on newly added "Drag components here" section and click on + icon. Search and select Responsive Column Control component from dropdown list and then drag and drop the component onto the desired location on the page.
Step 3: Click on the highlighted icon to configure the component.
Step 4: Author the properties tabs as shown below.
Authoring Fields
| Authoring Field name | Description |
| Properties tab | |
| Is Container | Enable to make section wrap into container. |
| Column Widths | By choosing column width each column will get adjusted to the width chosen. |
| DeepLink Identifier | Unique Html Identifier that gets added as an Id attribute inside component markup. |
| Add Margin Bottom | Add a 3 rem (48px) Margin at bottom |
| Border Options | |
| Vertical | Check vertical checkbox if we need to add vertical border |
| Vertical Border Width | Enter width in Number format |
| Vertical Border Color | Border colour can be selected from color palatte |
| Top and Bottom | When checked horizontal divider is shown in Top and Bottom |
| Horizontal Border Width | Enter horizontal width in Number format |
| Horizontal Border Color | Border colour can be selected from color palatte |
| Reverse Stack(Applicable only for 50-50 view) | When checked components will be reversed in 50-50 only in mobile and Tablet |
| Card view with equal heights | When checked card views are shown with equal heights |
| Top Padding | Enter top padding in Number format |
| Bottom Padding | Enter bottom padding in Number format |
Step 4: The author can once again click on "Drag components here" to add components and then configure them according to their needs.
For Example: In the image below conclusion component is authored in by choosing two columns, and link list is authored with three columns.
Author can use combination of components inside column control as per their requirement.
In the below example image is authored with three columns.