---
title: "Columns Component"
slug: "columns-component"
updated: 2025-12-04T19:22:24Z
published: 2025-12-04T19:22:24Z
canonical: "docs.unqork.io/columns-component"
---

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

# Columns Component

UDesignerClassic Designer

Use the **Columns component** to customize the layout of your [module](/v1/docs/introduction-to-the-module-builder). The Columns component includes pre-made column designs and the ability to build custom column design layouts. Once you've added a Columns component to your module, blue **Drag and Drop** boxes display in your chosen column design layout. Drag and drop components into these boxes and organize them into each column.

You'll find the Columns component in the [Display & Layout](/v1/docs/display-layout) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## About the Configuration Window

> To learn more about general component settings and those that display when a component is associated with Data Models, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Settings

### Default State Options

| Setting | Description |
| --- | --- |
| **Disable All Nested Fields** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **(ON)**, all components placed inside the columns are disabled. Use this setting instead of disabling each component. By default, this toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **(OFF)**. |
| **Hide All Nested Fields** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **(ON)**, all components inside the columns are hidden from the end-user. Use this setting instead of hiding each component. By default, this toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **(OFF)**. |
| Formatting | Displays a list of preset column options based on a 12 column grid system. Column presets include: ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_12.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **Single**: One 12-Unit column. ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_6and6.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **Double**: Two 6-Unit columns. ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_4and4and4.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **Triple** : Three 4-Unit columns. ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_3and3and3and3.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **Quadruple**: Four 3-Unit columns. ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_4and8.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **Double Small-Left**: One 3-Unit and one 9 Unit column. ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_8and4.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **Double Small-Right**: One 9-Unit and one 3-Unit column. ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_2and8and2.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **Triple Wide-Center**: One 2-Unit, one 8-Unit, and one 2-Unit column. ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_1and10and1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **Triple Gutter Sides**: One 1-Unit, one 10-Unit, and one 1-Unit column. ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_customize.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **Customize Columns**: Use a custom column layout. If the preset options do not meet your needs, create your own using the **![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_customize.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) Customize Columns** button. By default, the Columns component is set to the **Double** column setting. |

[![A static image displaying the Columns component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display_thumb_0_0(10).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display(10).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)

### Customize Columns

Click the ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_customize.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **Customize Columns** button to create your own column layout. The Column component uses the 12 column grid system to organize and position columns on the page. Customizing the column layout lets use set column widths, and push or move columns within the 12 grid system.

[![A static image displaying the Column component's Customize Columns setting.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/customCol_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/customCol.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)

| Setting | Description |
| --- | --- |
| **Column** | Each row represents the individual columns. Each column can be adjusted using the column attribute fields. |
| **Width** | The total width of the column. Your module has a total width of 12 units. For example, you could create 12 columns at a width of one unit each, or you could create two columns at a width of six units each. |
| **Push Right** | Moves all columns to the right by a specified number of units. If you push a column beyond the available width, a new row of columns starts |
| **Move Right** | Moves the individual column to the right by a specified number of units without moving the other columns. If you move one column into another column, the columns overlap. |
| **Move Left** | Moves the individual column to the left by a specified number of units without moving the other columns. If you move one column into another column, the columns overlap. |
| **Delete** | Permanently deletes the Column row. |
| **Add New Row** | Adds a new Column row to the bottom of the table. |

## Advanced Settings

### Additional Styling

| Setting | Description |
| --- | --- |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |

[![A static image displaying the Columns Component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced_thumb_0_0(9).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced(9).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)

## Accessibility Settings

### ARIA

| Setting | Description |
| --- | --- |
| **Aria** | Use these settings to create attributes to better support end-users that require screen readers to navigate your applications. |
| **Aria Label** | Use this field to define the component when when a screen reader arrives at it in Express View. |
| **Aria Role** | ARIA roles provide semantic meaning to content, letting screen readers and other accessibility tools present and support interaction with an element that is consistent with end-user expectations. ARIA roles are used to describe elements that do not exist in HTML or not supported by the browser. > To learn about supported ARIA roles in Unqork, view our [ARIA Accessibility Settings](/v1/docs/aria-accessible-rich-internet-applications-accessibility-settings-reference) reference guide. |

[![A static image displaying the Columns Component's Accessibility settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/accessibility_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/accessibility(1).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)

## Adding a Columns Component

In this example, you'll set up three evenly-spaced columns with three [Text Field](/v1/docs/text-field-component) components for your end-user to submit their first, middle, and last names.

### Configure the Columns Component

This component divides your module into three evenly-spaced columns.

1. In the Module Builder, drag and drop a **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(11).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) Columns** component onto your canvas.
2. In the Property ID field, enter **colDetails**.
3. Under **Formatting**, click the ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_4and4and4.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **(Triple) Button**.

[![A static image displaying the Columns Component's Display settings, the Three Column button is selected.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/coldDetails_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/coldDetails.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
4. Click **Save Component**.

### Configure the Text Field Components

Here you'll configure three Text Field components associated with your `First Name`, `Middle Name`, and `Last Name` fields.

1. Drag a **T****ext Field** component onto your canvas, placing it in column1 of the **colDetails** **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(11).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) Columns** component.

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_example_textField.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
2. In the Property ID field, enter **firstName**.
3. In the Label Text field, enter `First Name`.
4. Click **Save Component**.
5. Repeat this process with two more **T****ext Field** components, placing them in column2 and column3 of the **colDetails** **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(11).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) Columns** component.
6. Enter the following Property ID and Label Text values for the two **T****ext Field** components:

| Property ID | Label Text |
| --- | --- |
| **middleName** | Middle Name |
| **lastName** | Last Name |

[![A static image displaying the Module Builder canvas, the Columns component contains three text fields, one in each column.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/colDetails_Example_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/colDetails%20Example.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
7. Click **Save Component**.
8. **Save** your module.

Your module looks like the following in Express View:

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Column_Component_ExpressView.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)

Use the **Columns component** to customize the layout of your [module](/v1/docs/introduction-to-the-module-builder). The Columns component includes pre-made column designs and the ability to build custom column design layouts. Once you've added a Columns component to your module, blue **Drag and Drop** boxes display in your chosen column design layout. Drag and drop components into these boxes and organize them into each column.

You'll find the Columns component in the [Display & Layout](/v1/docs/display-layout) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Columns_Component_Intro.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)

## About the Configuration Window

> To learn more about general component settings and those that display when a component is associated with Data Models, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Panel

[![A static image dispaying the Columns component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Columns_Component_Display_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Columns%20Component%20Display.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)

| Setting | Description |
| --- | --- |
| Formatting | Displays a list of preset column options based on a 12 column grid system. Column presets include: ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_12.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **Single**: One 12-Unit column. ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_6and6.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **Double**: Two 6-Unit columns. ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_4and4and4.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **Triple** : Three 4-Unit columns. ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_3and3and3and3.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **Quadruple**: Four 3-Unit columns. ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_4and8.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **Double Small-Left**: One 3-Unit and one 9 Unit column. ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_8and4.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **Double Small-Right**: One 9-Unit and one 3-Unit column. ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_2and8and2.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **Triple Wide-Center**: One 2-Unit, one 8-Unit, and one 2-Unit column. ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_1and10and1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **Triple Gutter Sides**: One 1-Unit, one 10-Unit, and one 1-Unit column. ![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_customize.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **Customize Columns**: Use a custom column layout. If the preset options do not meet your needs, create your own using the **![Column Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/col_customize.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) Customize Columns** button. By default, the Columns component is set to the **Double** column setting. |
| **Disable All Nested Fields** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **(ON)**, all components placed inside the columns are disabled. Use this setting instead of disabling each component. By default, this toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **(OFF)**. |
| **Hide All Nested Fields** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **(ON)**, all components inside the columns are hidden from the end-user. Use this setting instead of hiding each component. By default, this toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **(OFF)**. |

### Customize Columns

[![A static image displaying the Columns component Display settings, the Customize Columns button is selected and the Customize Columns table is displayed.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Columns_Component_CustomizeColumns_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Columns%20Component%20CustomizeColumns.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)

| Setting | Description |
| --- | --- |
| **Col1/Col2/...** | [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Column_Component_AddDeleteColumn.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) The individual columns. Each column can be adjusted using the Column Attribute fields. To add or remove a column, mouse over an existing column to reveal the `···` (Settings) button. The `···` (settings) button contains the following column settings: - **Insert Column**: Adds a column to the right side of the table. - **Delete Column**: Deletes the selected column. |
| **Column Attribute** | The Column Attribute rows define the size and position of each column. |
| **Width** | The total width of the column. Your module has a total width of 12 units. For example, you could create 12 columns at a width of one unit each, or you could create two columns at a width of six units each. |
| **Push Right** | Moves all columns to the right by a specified number of units. If you push a column beyond the available width, a new row of columns begins. |
| **Move Right** | Moves the individual column to the right by a specified number of units without moving the other columns. If you move one column into another column, the columns overlap. |
| **Move Left** | Moves the individual column to the left by a specified number of units without moving the other columns. If you move one column into another column, the columns overlap. |

## Advanced Panel

[![A static image dispaying the Columns component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Columns_Component_Advanced_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Columns%20Component%20Advanced.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)

### Additional Styling

| Setting | Description |
| --- | --- |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |

## Accessibility Panel

[![A static image dispaying the Columns component's Accessibility settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/classic_accessibility_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/classic%20accessibility(1).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)

### ARIA

| Setting | Description |
| --- | --- |
| **Aria** | Use these settings to create ARIA attributes to better support end-users that require screen readers to navigate your applications. |
| **Aria Label** | Use this field to define the component when when a screen reader arrives at it in Express View. |
| **Aria Role** | ARIA roles provide semantic meaning to content, letting screen readers and other accessibility tools present and support interaction with an element that is consistent with end-user expectations. ARIA roles are used to describe elements that do not exist in HTML or not supported by the browser. > To learn about supported ARIA roles in Unqork, view our [ARIA Accessibility Settings ref](/v1/docs/aria-accessible-rich-internet-applications-accessibility-settings-reference)erence guide. |

## Adding a Columns Component

In this example, you'll set up three evenly-spaced columns with three [Text Field](/v1/docs/text-field-component) components for your end-user to submit their first, middle, and last names.

> [!NOTE]
> These instructions assume that you have an open module saved and with a title.

### Configure the Columns Component

This component divides your module into three evenly-spaced columns.

1. In the Module Builder, drag and drop a **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(11).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) Columns** component onto your canvas.
2. In the Property ID field, enter **colDetails**.
3. Under **Formatting**, click ![Three Columns Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Columns_Component_3col_icon.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)**(three columns)**.

[![A static image displaying the Columns Component's Display settings, the Three Column button is selected.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Columns_Component_example_col_1_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Columns%20Component%20example%20col%201.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
4. Click **Save & Close**.

### Configure the Text Field Components

Next, you'll configure three Text Field components so you end-user can enter the first, middle, and last names.

1. Drag a **T****ext Field** component onto your canvas, placing it in column1 of the **colDetails** **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(11).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) Columns** component.

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Column_Component_example_txtfield_1.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
2. In the Property ID field, enter **firstName**.
3. In the Label Text field, enter `First Name`.
4. Click **Save & Close**.
5. Repeat this process with two more **T****ext Field** components, placing them in column2 and column3 of the **colDetails** **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(11).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) Columns** component.
6. Enter the following Property ID and Label Text values for the two **T****ext Field** components:

| Property ID | Label Text |
| --- | --- |
| **middleName** | Middle Name |
| **lastName** | Last Name |

[![A static image displaying the Module Builder canvas, the Columns component contains three text fields, one in each column.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Columns_Component_example_txtfield_2_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Columns%20Component%20example%20txtfield%202.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
7. Click **Save & Close**.
8. **Save** your module.

Your module looks like the following in Express View:

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Column_Component_ExpressView.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)

## Resources

- [Modify the Columns component using the toolbar settings](/v1/docs/component-toolbar-settings).
- [Learn about Display and Layout components](/v1/docs/introduction-to-display-layout).

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Also known as the Boostrap Grid System, the 12 Column Grid system is a series of 12 invisible vertical lines that break the page into different sections.

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.

Assistive technology that reads digital text aloud for users with visual impairments or reading disabilities.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

ARIA (Accessible Rich Internet Applications) is a set of attributes used in HTML to enhance the accessibility of web content, particularly dynamic or interactive web pages, for users who rely on assistive technologies like screen readers.