H-Stack

H-Stack

In a nutshell

H-Stack is a layout container that arranges its child elements in a horizontal row. It controls the spacing, alignment, and overflow behavior of its child elements, while the children themselves provide the visible content.

1. Overview

H-Stack is a flow-based layout container that arranges its direct child elements from left to right. It stacks them based on the configured spacing between them and aligning them within the container according to the chosen setting. Hence, a H-Stack element has no visible content of its own since all content comes from elements placed inside it.


H-Stack can be placed inside other supported container elements such as a another H-Stack, V-Stack, or a Canvas element. These container elements along with all other elements can also be added into a H-Stack to build custom layouts.


Ideal for:

  1. Navigation bars and toolbars
  2. Groups of buttons or controls
  3. Horizontally aligned labels and values
  4. Stat and metric rows
  5. Card headers and footers
  6. Tag and chip rows

2. Display properties

A H-Stack element is a layout element with no content-binding characteristic of its own. The visible content can come from child elements and presets placed inside the H-Stack.

Property Description
Element Name The internal identifier for this H-Stack element. This link name is auto-generated on placing within the designer and can be customized as required.

All visible content comes from child elements placed inside the H-Stack.

3. Styling properties

Stack type and arrangement:

  1. Alignment
  2. Layout *link*
  3. Stack styling
  4. Background *link*
  5. Padding *link*
  6. Margin *link*
  7. Corner Radius *link*
  8. Border *link*
  9. Shadow *link*
  10. Opacity *link*
NotesNote: When a H-Stack is switched to an V-Stack in the Style pane, the container is converted to a vertical arrangement while retaining all child elements within and their configurations.

4. Action properties

The Actions tab controls what happens when a portal user clicks the H-stack and triggers a preconfigured ON CLICK action. The actions can be:

  1. None - No action is performed when the H-stack is clicked. This is the default option for the ON CLICK action.
  2. Navigate To - Navigates the portal user to a destination when the H-stack is clicked. Selecting this option reveals two additional properties.
    1. Page / URL - This is the navigation's destination. You can either enter a publicly accessible URL directly, or select from the list of portal pages available in the dropdown. The dropdown lists all default pages (Sign In, Sign Up, Reset Password, and Create Password) and any custom pages created in the portal.
    2. Open In - This property controls how the destination loads. While Same Window reloads the current browser tab to display the destination portal page or URL, New Window opens it in a separate browser tab.

5. Try it yourself

Add an H-Stack and try the following:

  1. Drop a Hero Section preset and a Menu element inside the H-Stack. Set Align Components to Edge to Edge and Width to Fill to build a full-width navigation bar with the logo on the left and menu links on the right.
  2. Drop three Text elements inside and set Spacing to 24px. Change Align Components to Center to create a centered row.
  3. Reduce the H-Stack's Height and set Overflow to Wrap to observe how children wrap into a second row when space is exceeded.

6. Points to note

  1. H-Stack controls direct children only - When a nested container such as another H-Stack or a Canvas is added within a H-Stack, they manages their own children independently.
  2. Fill sizing is only available when the parent is a stack - When the H-Stack's parent is a Canvas element, Fill is not available for Width or Height in the layout property.
  3. Overflow only has a visible effect when the H-Stack has a fixed size - If the stack uses Auto sizing, it expands to fit its children and overflow may not be triggered.
  1. Configuring and managing portal pages *link*
  2. V-Stack *link*