Use the Column element within the Row for columns element to add columns to your layout. By default the column is a Flex item when it is placed within a Row for columns.

Locating the column element

To find the Column element:

• Navigate to a component or a template with the Layout canvas
• Click the + button on the Layout canvas
• Within the Elements tab, look for the Column element.

The Column element includes the following fields:

Column width and position

The default width when adding a column to your layout canvas is Undefined and the column will expand to the available width. 

• Width - Set the width of the column in relation to the columns within the Responsive grid
  • None - Hide the column
  • Undefined - Expand the column to the available width 
  • Auto - The natural fixed width of the content within the column
  • 1-12 - Set a numbered column when you need a particular sized column 
• Pull - Pull the column left by a specific number of grid columns. This will overlap any adjacent columns.
• Push - Push the column right by a specific number of grid columns. This will overlap any adjacent columns.
• Offset - Offset the column right by a specific number of columns. This will not overlap any adjacent columns.

Link and interaction

Use the Link fields to make your column into a link. This is used for creating "cards" or "link panels".

• Title attribute - Add a title attribute for your link
• Type - Select the type of link
  • Internal page - Link to an internal page
    • Link to page - Type the name of the internal page you are linking to.
  • URL - Link to a URL
    • URL - Enter the full URL of an external web page.
  • Anchor - Link to a page Anchor
    • Anchor - Enter an Anchor ID. You do not need to include the #.
  • Back to top - Add a smooth scroll back to the top of the page
  • Scroll to - Add a smooth scroll to a jQuery selector
    • Scroll target - Enter a jQuery selector to target an element to scroll to.
    •  Scroll duration - Enter the time it will take for the scroll to complete in milliseconds.
    • Offset type
      • Offset against element - Offset the top of completed scroll position by the height of an element. Target the element using a jQuery selector.
      • Offset in PX - Offset the top of completed scroll position in pixels.
  • Modifier - Toggle, add or remove a modifier class on an element using on-click. For more information, see Add on-click interactivity to elements
  • Open modal - Link to open a modal
    • Trigger ID - Enter the ID of the modal trigger, this is the ID of this element
      Adding a trigger ID will allow for the focus will return to the body when the modal closes. 
    • Modal ID - Enter the ID of the modal to open
• Target window - Select the target window for the link. 

Custom style

Layout style - Apply a Layout custom style to the Column. See more information on Applying styles to elements.

Match heights

• Match heights - Match the height of the element using:
  • None - Removes the match heights at the specific breakpoint
  • Class - Match the height of the element with another element with the same class name
  • Children with class - Match the heights of any child elements with the same class name
  • Child element - Match the heights of all child elements of the same type.

For more information on Match heights, see Match the heights of elements.

Comments

• Add comments - Add comments to the Element.  For more information, see Adding comments to an element.

Column element

Use the Column element within the Row for columns element to add columns to your layout. By default the column is a Flex item when it is placed within a Row for columns.

Locating the column element

To find the Column element:

• Navigate to a component or a template with the Layout canvas
• Click the + button on the Layout canvas
• Within the Elements tab, look for the Column element.

The Column element includes the following fields:

Column width and position

The default width when adding a column to your layout canvas is Undefined and the column will expand to the available width. 

• Width - Set the width of the column in relation to the columns within the Responsive grid
  • None - Hide the column
  • Undefined - Expand the column to the available width 
  • Auto - The natural fixed width of the content within the column
  • 1-12 - Set a numbered column when you need a particular sized column 
• Pull - Pull the column left by a specific number of grid columns. This will overlap any adjacent columns.
• Push - Push the column right by a specific number of grid columns. This will overlap any adjacent columns.
• Offset - Offset the column right by a specific number of columns. This will not overlap any adjacent columns.

Link and interaction

Use the Link fields to make your column into a link. This is used for creating "cards" or "link panels".

• Title attribute - Add a title attribute for your link
• Type - Select the type of link
  • Internal page - Link to an internal page
    • Link to page - Type the name of the internal page you are linking to.
  • URL - Link to a URL
    • URL - Enter the full URL of an external web page.
  • Anchor - Link to a page Anchor
    • Anchor - Enter an Anchor ID. You do not need to include the #.
  • Back to top - Add a smooth scroll back to the top of the page
  • Scroll to - Add a smooth scroll to a jQuery selector
    • Scroll target - Enter a jQuery selector to target an element to scroll to.
    •  Scroll duration - Enter the time it will take for the scroll to complete in milliseconds.
    • Offset type
      • Offset against element - Offset the top of completed scroll position by the height of an element. Target the element using a jQuery selector.
      • Offset in PX - Offset the top of completed scroll position in pixels.
  • Modifier - Toggle, add or remove a modifier class on an element using on-click. For more information, see Add on-click interactivity to elements
  • Open modal - Link to open a modal
    • Trigger ID - Enter the ID of the modal trigger, this is the ID of this element
      Adding a trigger ID will allow for the focus will return to the body when the modal closes. 
    • Modal ID - Enter the ID of the modal to open
• Target window - Select the target window for the link. 

Important

If you make a container into a Link you cannot add Links (<a> tags) within it as this is not valid HTML.

Custom style

Layout style - Apply a Layout custom style to the Column. See more information on Applying styles to elements.

Match heights

• Match heights - Match the height of the element using:
  • None - Removes the match heights at the specific breakpoint
  • Class - Match the height of the element with another element with the same class name
  • Children with class - Match the heights of any child elements with the same class name
  • Child element - Match the heights of all child elements of the same type.

For more information on Match heights, see Match the heights of elements.

Comments

• Add comments - Add comments to the Element.  For more information, see Adding comments to an element.