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:

1. Navigate to a component or a template with the Layout canvas
2. Click the + button on the Layout canvas
3. 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. 

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.