• Unique Id : (Required) Nintex Apps automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

• Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Nintex Apps builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style variant dropdown.

  Note: 

  • To refresh available style variant options, click Refresh style variants.

  • This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

• ARIA label: Determines what description will be read by assistive technology, such as screen readers, by setting the aria-label HTML attribute, which is part of the Web Accessibility Initiative—Accessible Rich Internet Applications (WAI-ARIA) spec.

  Used to describe elements where text may not be visible, this property can be a specific string of text, the merge variables of one or more fields, or a combination of the two.

• ARIA role: Determines which type of user interface element the component represents for assistive technology. The available options all refer to standard landmark ARIA roles. For more technical information on each role type, refer to MDN web docs.

  • Banner: Used for defining global site details, such as company name, global search, logos, and similar information.

  • Complementary: Used for content that, while related to the main content area, is not necessary for that main area to stand alone. Typically used for sidebars and other supplementary information.

  • Content Info: Used for footers that appear on each page, which typically contain copyright information, navigation items, or similar content.

  • Form: Used to identify sections that comprise a singular form--even though it may be comprised of multiple components.

  • Main: Used to identify primary focus of the page.

  • Navigation: Used to indicate a section containing links for navigating a site.

  • Region: Used as a more generic landmark in order to indicate an area is relevant, but not categorized under the other available roles.

  • Search: Used to indicate a section contains elements for searching the page or site.

• ARIA labelledby: Determines which component contains text describing this element for assistive technologies. Can point to Header or Text components. For more technical information, see MDN web docs on the aria-labelledby attribute.

• Main axis: Determines how to align the Responsive Grid divisions.

  Note: 

  The Responsive Grid has a variety of values to represent the relationships of divisions within the grid. The easiest place to start? Try:

  • Main axis: Row
  • Justify divisions: Left
  • Align divisions: Top

  • Row: Aligns divisions in a row.

    • Justify divisions: Determines how the row of grid divisions will justify along a left-right axis. This property is useful to locate the divisions within the grid when they have both maximum and minimum width set.

      • Left : (Default) Divisions are justified with the left margin of the grid.
      • Center: Divisions are justified in the center of the grid.
      • Right: Divisions are justified with the right margin of the grid.
      • Space between: Divisions are evenly spaced within the grid, with the first division justified to the left margin and the last division justified to the right margin.
      • Space around: Divisions are evenly spaced within the grid. There is spacing between the first division and the left margin, and between the last division and the right margin.

    • Align divisions: Determines where divisions sit within the grid, positioning them along a top-to-bottom axis.

      • Top : (Default) Divisions are aligned with the top of the grid.
      • Middle: Divisions are aligned along a center left-right axis of the grid.
      • Bottom: Divisions are aligned with the bottom of the grid.
      • Stretch: Stretches the division's contents to fit the division's full height.

  • Column: Stacks division on top of one another.

    • Justify divisions: Determines how the stacked grid divisions will justify along a top-to-bottom axis. This property is useful to locate the divisions within the grid when they have both maximum and minimum width set.

      • Top : (Default) Divisions are justified along the top of the grid.
      • Middle: Divisions are justified in the center of the grid.
      • Bottom: Divisions are justified along the bottom of the grid.
      • Space Between: Divisions are evenly spaced within the grid, with the first division justified to the top margin and the last division justified to the bottom margin.
      • Space Around: Divisions are evenly spaced within the grid. There is spacing between the first division and the top margin, and between the last division and the bottom margin.

    • Align divisions: Determines where divisions sit within the grid, positioning them along a left-right axis.

      • Left : (Default) Divisions are aligned with the left margin of the grid.
      • Center: Divisions are aligned along the center top-to-bottom axis of the grid.
      • Right: Divisions are aligned with the right margin of the grid.
      • Stretch: Stretches the division's contents to fit the division's full width.
• Division wrapping: Determines whether divisions are forced onto one line or can wrap onto multiple lines. Select Wrap or No wrap.

• Column gutter size : (Optional) The distance between divisions when they are displayed as columns, side-by-side. This property typically affects devices with larger screens, such as desktops.

  • None
  • Extra Small
  • Small
  • Reduced
  • Regular
  • Increased
  • Large
  • Extra Large
  • Huge

• Row gutter size : (Optional) The distance between divisions when they are stacked as rows atop one another. This property typically affects smaller screen sizes or mobile devices.

  • None
  • Extra Small
  • Small
  • Reduced
  • Regular
  • Increased
  • Large
  • Extra Large
  • Huge

• Height strategy:

  • Fit to content: This sizes the Responsive Grid to fit the components within.

    • Max height (optional): The maximum height of the Responsive Grid component. This can be specified using px, em, rem, %, vh, or vw measurements.

    • Min height (optional): The minimum height of the Responsive Grid component. This can be specified using px, em, rem, %, vh, or vw measurements.

  • Fixed height: Sets an absolute height.

    • Height: The height of the Responsive Grid component.

• Width strategy:

  • Fill available space: This sizes the Responsive Grid to fit the components within.

    • Min width (optional): The minimum width of the Responsive Grid component. This can be specified using px, em, rem, %, vh, or vw measurements.

    • Max width (optional): The maximum width of the Responsive Grid component. This can be specified using px, em, rem, %, vh, or vw measurements.

  • Fixed width: Sets an absolute width.

    • Width: The width of the Responsive Grid component.

• Overflow x-axis: Determines how content is handled when it overflows the grid's specified width.

  • Default: The content is scrollable and a scroll bar is displayed.
  • Visible: (Default) The overflow content is not clipped. The content is visible outside the grid's specified width.
  • Scroll: The content is scrollable and a scroll bar is displayed.
  • Hidden: The content that does not fit into the Responsive Grid remains hidden.
  • Auto: The Responsive Grid resizes the content to fit into the Responsive Grid's width.

• Overflow y-axis: Determines how content is handled when it overflows the grid's specified height.

  • Default: The content is scrollable and a scroll bar is displayed.
  • Visible:  (Default) The overflow content is not clipped. The content is visible outside the grid's specified height.
  • Scroll: The content is scrollable and a scroll bar is displayed.
  • Hidden: The content that does not fit into the Responsive Grid remains hidden.
  • Auto: The Responsive Grid resizes the content to fit into the Responsive Grid's height.

• Margins: Sets a component's margin (the space around it) relative to other components on the page.

  • To set margins for all sides, click All.

  • To set margins for each side individually, click Separate.

  Margins must be set using spacing variables defined in the design system. Custom or arbitrary values are not allowed. For more information, see Spacing.

Background source: This property controls the appearance of the Responsive Grid's background.

• Design system: Uses the Design system for the background. For more information, see Design systems.

• Image: Pulls in an image from a Nintex Apps connection.

  • Connector: Select the connector from which you will be pulling the image.

  Note:  Select Ui-only for images associated with Ui-only models.

  • Connection: Choose the specific connection containing the desired image. Defaults to Ui-only for Ui-only models.

  • Image source:

  • URL: To access an image URL using Nintex Apps, you must change the connection and connector:

    • Connector: UI-only.
    • Connection: UI-only.
    • Image Source: URL
    • Merge model: It is not necessary to specify a model. However, if using merge fields for the URL, setting the model provides the needed model row context.
    • Image URL: Enter the complete URL. This property is compatible with merge syntax.

  • File:

    • Merge model: It is not necessary to specify a model. However, if using merge fields for the URL, setting the model provides the needed model row context.
    • File Name: If the file has been correctly uploaded, when you start typing the filename, Nintex Apps will autocomplete.

  • Attachment:

    • Model: Nintex Apps presents a list of available Models in the dropdown, and selects one for this field, but you can change it.
    • Image field: The user can select a URL field from the model, enter the complete URL, or use a global merge value to identify the URL.

    Note:  While the latter two options do not require a model to be specified, when using merge fields for the URL, setting the model provides the needed model row context.

  • Size: Controls the size of the image.

    • Original: The image will display at its original size, without regard to the size of the Responsive Grid.
    • Contain: The image will scale so that it will at least meet the top and bottom margins of the Responsive Grid.
    • Cover: The image will scale so all parts of the Responsive Grid's background are covered by the image.

  • Position: Choose the orientation of the image within the Responsive Grid.

  • Repeat: Determine if the image will repeat vertically, horizontally, or both.

    • No Repeat
    • Horizontally
    • Vertically
    • Both

  • Special effects: Add special effects to Responsive Grid image.

    • No effects
    • Parallax effect: When scrolling, the contents in the grid will scroll over the image.

  • Color: Background color behind the image. Defaults to transparent.

    • Click the transparent symbol to open color the selection menu.

• Color: Choose a color to serve as the Responsive Grid background. Defaults to transparent.

  • Click the transparent symbol to open color the selection menu.

Click Add and then select:

• Add action flow: Select an existing action flow or click Create new action flow. Use action flows to launch actions.
• Show menu: Configure a custom menu to show when a user interacts with an element.

Standard display logic options are available to display or hide the component or feature.

• Unique Id : (Required) Nintex Apps automatically generates an alphanumeric ID for the grid division; if preferred, give it a practical name.

• ARIA label: Determines what description will be read by assistive technology, such as screen readers, by setting the aria-label HTML attribute, which is part of the Web Accessibility Initiative—Accessible Rich Internet Applications (WAI-ARIA) spec.

  Used to describe elements where text may not be visible, this property can be a specific string of text, the merge variables of one or more fields, or a combination of the two.

• ARIA role: Determines which type of user interface element the component represents for assistive technology. The available options all refer to standard landmark ARIA roles. For more technical information on each role type, refer to MDN web docs.

  • Banner: Used for defining global site details, such as company name, global search, logos, and similar information.

  • Complementary: Used for content that, while related to the main content area, is not necessary for that main area to stand alone. Typically used for sidebars and other supplementary information.

  • Content Info: Used for footers that appear on each page, which typically contain copyright information, navigation items, or similar content.

  • Form: Used to identify sections that comprise a singular form--even though it may be comprised of multiple components.

  • Main: Used to identify primary focus of the page.

  • Navigation: Used to indicate a section containing links for navigating a site.

  • Region: Used as a more generic landmark in order to indicate an area is relevant, but not categorized under the other available roles.

  • Search: Used to indicate a section contains elements for searching the page or site.

• ARIA labelledby: Determines which component contains text describing this element for assistive technologies. Can point to Header or Text components. For more technical information, see MDN web docs on the aria-labelledby attribute.

• Change order: Click to move this division left or right in the grid.

• Flex ratio: This sets the size of this division relative to other divisions. For example, if there are two divisions in a grid, and the flex ratio for each is 1, they will each take up ½ of the grid. If one has a flex ratio of 2, and the other has a flex ratio of 1, the first one occupies ⅔ of the grid, and the second one occupies ⅓ of it.

• Align self: Sets a separate alignment for the selected division. This setting supersedes the alignment set for all divisions in the Responsive Grid Flex properties.

  • Auto: (Default) Divisions inherit the value of the alignment set for all divisions in the Responsive Grid Flex properties for the parent responsive grid.
  • Left: Divisions are aligned along a center left-right axis of the grid.
  • Center: Divisions are aligned with the center of the grid.
  • Right: Divisions are aligned along a center right-right axis of the grid.
  • Stretch: Stretches the division's contents to fit the division's full height.

• Height strategy:

  • Fit to content: This sizes the Responsive Grid to fit the components within.

    • Max height (optional): The maximum height of the Responsive Grid component. This can be specified using px, em, rem, %, vh, or vw measurements.

    • Min height (optional): The minimum height of the Responsive Grid component. This can be specified using px, em, rem, %, vh, or vw measurements.

  • Fixed height: Sets an absolute height.

    • Height: The height of the Responsive Grid component.

• Width strategy:

  • Fill available space: This sizes the Responsive Grid to fit the components within.

    • Min width (optional): The minimum width of the Responsive Grid component. This can be specified using px, em, rem, %, vh, or vw measurements.

    • Max width (optional): The maximum width of the Responsive Grid component. This can be specified using px, em, rem, %, vh, or vw measurements.

  • Fixed width: Sets an absolute width.

    • Width: The width of the Responsive Grid component.

• Overflow x-axis: Determines how content is handled when it overflows the grid's specified width.

  • Default: The content is scrollable and a scroll bar is displayed.
  • Visible: 
  • Scroll: The content is scrollable and a scroll bar is displayed.
  • Hidden: The content that does not fit into the Responsive Grid remains hidden.
  • Auto: The Responsive Grid resizes the content to fit into the Responsive Grid's width.

• Overflow y-axis: Determines how content is handled when it overflows the grid's specified height.

  • Default: The content is scrollable and a scroll bar is displayed.
  • Visible: 
  • Scroll: The content is scrollable and a scroll bar is displayed.
  • Hidden: The content that does not fit into the Responsive Grid remains hidden.
  • Auto: The Responsive Grid resizes the content to fit into the Responsive Grid's height.

• Margins: Sets a component's margin (the space around it) relative to other components on the page.

  • To set margins for all sides, click All.

  • To set margins for each side individually, click Separate.

  Margins must be set using spacing variables defined in the design system. Custom or arbitrary values are not allowed. For more information, see Spacing.

Background source: This property controls the appearance of the Responsive Grid's background.

• Design system: Uses the Design system for the background. For more information, see Design systems.

• Image: Pulls in an image from a Nintex Apps connection.

  • Connector: Select the connector from which you will be pulling the image.

  Note:  Select Ui-only for images associated with Ui-only models.

  • Connection: Choose the specific connection containing the desired image. Defaults to Ui-only for Ui-only models.

  • Image source:

  • URL: To access an image URL using Nintex Apps, you must change the connection and connector:

    • Connector: UI-only.
    • Connection: UI-only.
    • Image Source: URL
    • Merge model: It is not necessary to specify a model. However, if using merge fields for the URL, setting the model provides the needed model row context.
    • Image URL: Enter the complete URL. This property is compatible with merge syntax.

  • File:

    • Merge model: It is not necessary to specify a model. However, if using merge fields for the URL, setting the model provides the needed model row context.
    • File Name: If the file has been correctly uploaded, when you start typing the filename, Nintex Apps will autocomplete.

  • Attachment:

    • Model: Nintex Apps presents a list of available Models in the dropdown, and selects one for this field, but you can change it.
    • Image field: The user can select a URL field from the model, enter the complete URL, or use a global merge value to identify the URL.

    Note:  While the latter two options do not require a model to be specified, when using merge fields for the URL, setting the model provides the needed model row context.

  • Size: Controls the size of the image.

    • Original: The image will display at its original size, without regard to the size of the Responsive Grid.
    • Contain: The image will scale so that it will at least meet the top and bottom margins of the Responsive Grid.
    • Cover: The image will scale so all parts of the Responsive Grid's background are covered by the image.

  • Position: Choose the orientation of the image within the Responsive Grid.

  • Repeat: Determine if the image will repeat vertically, horizontally, or both.

    • No Repeat
    • Horizontally
    • Vertically
    • Both

  • Special effects: Add special effects to Responsive Grid image.

    • No effects
    • Parallax effect: When scrolling, the contents in the grid will scroll over the image.

  • Color: Background color behind the image. Defaults to transparent.

    • Click the transparent symbol to open color the selection menu.

• Color: Choose a color to serve as the Responsive Grid background. Defaults to transparent.

  • Click the transparent symbol to open color the selection menu.

Standard display logic options are available to display or hide the component or feature.