Inline collection

"Inline collection" is helpful to display a collection of items visually appealingly within the page. It is a mini version of the collection page.

This component is commonly used in mobile applications to show a list of items, such as products or services, news articles, or events.

Data Source

Choose the table of items you want to showcase within a page.


  • Horizontal Grid: Opt for the number of rows to create an appealing horizontal grid display.

  • Vertical Grid: Select the number of columns to create a neat vertical grid layout.

  • List: Choose this option for a straightforward vertical list display of your items.

Limit Items

Define the maximum number of items you wish to display within the Inline Collection. If the number of available items exceeds the limit, the rest can be accessed by tapping the "View all" button.

Image URL & Ratio

Include photos to enhance the visual appeal of each item. You can specify the URL of the image and its aspect ratio.


Include a descriptive title for each item in the collection. This provides users with clear and concise information about the content.


Complement the title with additional information or context about each item. This helps users quickly grasp the item's relevance.


Choose whether to hide the component from the view of the app users. This can be useful in cases where the inline collection is not relevant in some particular cases or events or needs to be hidden for security reasons.


Name the component for use with the Typescript.


Last updated