Skip to main content


Design UI


Applies only to Mobile Apps and Reactive Web Apps



Gallery Pattern

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • The Gallery pattern displays content (such as cards) in a specific set of columns, configurable per device type and orientation. Use this pattern to display a List of elements side by side, with a different number of items per row on different devices.

    Here's a preview in Service Studio:

    1. Drag a list or static content.

    2. Set the number of items in Input Parameters.

    1. Use the Animate block as the first element inside the list.

    2. Place your content inside the b block.

    3. Define the Animate block with your desired type of animation, and set the delay with current row number from the list.

    Note: If you are using a List inside a Gallery, you need to disable virtualization.

    Input Parameters

    Input Name Description Default Value
    ColumnsInPhonePortrait Number of columns in a Portrait phone. 1
    ColumnsInPhoneLandscape Number of columns in a Landscape phone. 2
    ColumnsInTabletPortrait Number of columns in a portrait tablet. 3
    ColumnsInTabletLandscape Number of columns in a Landscape tablet. 4
    UseGutter If set, add a gutter to all the columns except the first. True

    Layout and Classes


    The following sample uses the Gallery pattern:

    • Was this article helpful?