Group

Groups are container elements for multiple elements. They allow you to control the positioning, visibility, and alignment of groups elements.

To populate a group element, drag and drop elements into it.

Note

Group elements can be nested.

Properties

• ID

  Element identifier.

• Width

  • Fit

    Sets the width of the Group container to accomodate the widest contained element (if Mode = Column) or the combined widths of the contained elements (if Mode = Row).
  • Fill

    Uses all of the available width.

    For more information, see Element distribution.
• Mode

  How to organize contained elements.

  • Column (Default)

    Contained elements are stacked vertically.
  • Row

    Contained elements are placed horizontally.
  • Repeater

    For information on this mode, see Repeater mode.

• Alignment section

  • Gap size

    Spacing between adjacent elements in the group element.

    This value is added to the contained elements’ individual spacing settings.

    • Default

    • None

    • Small (8 px)

    • Medium (16 px)

    • Large (24 px)

  • Justify content

    Note

    For information on this property, see Aligning group contained elements.

  • Align items

    Note

    For information on this property, see Aligning group contained elements.

• Background section

  • Background color

    There are several options.

• Border section

  • Border color

    There are several options.
  • Border radius

    Curvature of the group border corners.

    • Default

    • None

    • Small

    • Medium

    • Large

  • Top border, Right border, Bottom border, Left border

    These properties control the line style of the four border sections.

    • Default

    • None (Default)

    • Solid

In this section

• Repeater mode
• Aligning group contained elements