Alignment

Alignment

In a nutshell

Alignment controls where an element's*link* content is positioned within a portal page's screen layout, a canvas, H-Stack, or V-Stack element*link*.

1. Description

Alignment defines the position of an element*link to elements section*within a screen or a canvas container along the horizontal axis (left, center, right) or the vertical axis (top, middle, bottom). This helps align multiple elements within a visual layout to different positions to create complex information cards, hero sections, and more.


The below images show how alignment affects the elements of a card preset when changed from Center alignment to Left alignment.

     

2. Possible values

Alignment is controlled through two independent axes. Each axis has three options:

  1. Horizontal alignment - Controls where content is placed along the left-to-right axis:
Value Description
Left Aligns content to the left.
Ideal for: Body text, left-anchored labels, etc.
Center Balances content visually at the center.
Ideal for: Headings, icons, call-to-action buttons, etc.
Right Aligns content to the right.
Ideal for: Numeric values, currency, trailing actions, etc.
  1. Vertical alignment - Controls where content is placed along the top-to-bottom axis:
Value When to use it?
Top Aligns content to sit flush at the top.
Ideal for: Headings in a tall container, etc.
Middle Balances content vertically within the element's height.
Ideal for: Icons, illustrations, empty states, etc.
Bottom Aligns content to the base of an element's container.
Ideal for: Labels below an icon, footers, etc.

3. How to set alignment?

  1. Select an element on the building space and click the three ellipsis on the hovering toolbar to open the Properties pane on the right.
  2. Navigate to the Style tab on the right pane and locate the Alignment control at the top of the pane. It displays two groups of icon buttons, the left group for horizontal alignment and the right group for vertical alignment.
  3. Click the desired icon in the horizontal or vertical group to set an appropriate alignment according to the UI element's requirement.
  4. Click Save in the top right corner to ensure the changes are retained.

4. Visual reference

The following visual representations show how each Alignment value positions content within an element.

  

  

5. Applicable elements

Alignment is available on all the primitives and composite elements listed which are added within a canvas or stack.

6. Points to note

  1. Alignment and padding work together - Alignment positions content within the element's boundary, while padding*link to Padding doc* controls the inner spacing between the boundary and the content. Adjusting one affects how the other appears visually. For example, applying Center alignment on an element with unequal padding will shift the visual center to account for the padding value.
  2. Alignment behaves differently inside a horizontal or vertical stack - When an element is placed inside an horizontal and vertical stack container, the child element's alignment is governed by the stack's own alignment property not the individual element's Alignment property. Refer to Stack property*link to propertie's doc* for details on how alignment works within stacks.

Explore other properties

  1. Layout
  2. Padding
  3. Margin
  4. Font
  5. Background
  6. Corner Radius
  7. Border
  8. Shadow
  9. Opacity
  10. Image
  11. Icon and image styling
  12. Stack styling