Canvas

Canvas

In a nutshell

Canvas is a layout container that positions its child elements using a free range flow arrangement. It gives precise control over where each child sits within a fixed area.

1. Overview

The Canvas element is a free-form layout container that lets you position inner elements freely within its fixed dimensions. This gives you precise, pixel-level control for arranging elements and building complex components such as hero sections from scratch. When elements are placed directly beside or above and below each other, they automatically form a horizontal or vertical stack within the canvas. A canvas can contain multiple such stacks, and each stack can be selected and styled independently.


Ideal for:

  1. Layouts where elements must overlap, such as a text label placed directly over a background image
  2. Designs that require precise positioning of multiple elements
  3. Custom dashboard blocks or cards where standard row or column flow does not apply
  4. Any section of the portal page's design where you need to break out of a Stack arrangement.

2. Display properties

Canvas is a layout element with no content of its own. All visible content comes from child elements placed inside it.

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

3. Styling properties

  1. Layout
  2. Background
  3. Padding
  4. Margin
  5. Border
  6. Corner Radius
  7. Shadow
  8. Opacity

When elements are stacked within a canvas, you can style the stack independently of the canvas. It includes the following additional styling properties besides those available for the canvas:

  1. Alignment
  2. Stack styling

4. Action properties

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

  1. None - No action is performed when the canvas is clicked. This is the default option for the ON CLICK action.
  2. Navigate To - Navigates the portal user to a destination when the canvas 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 a Canvas element and try the following:

  1. Set the canvas's width and height to 400px by 300px with a background color. Drag an Image element into it and set the layout's T to 0, L to 0, Width to 100%, and Height to 100% so the image fills the canvas completely.
  2. Drag a Text element into the same canvas and set B to 16px and L to 16px. The text is now anchored to the lower-left corner, sitting on top of the image.
  3. Apply a corner radius value of 12px to the canvas. Both the background and the overlapping children are clipped to the rounded shape.
  4. Set Overflow to Scroll and reduce the canvas height so child elements extend beyond the container's boundary.

6. Points to note

  1. When corner radius is applied to a canvas, both the container surface and any children that overlap the corners are clipped to the rounded shape.
  1. Configuring and managing portal pages *link*