Tutorials

/

Thumbnail Element: How Do You Use It?

The Thumbnail element is used to display a small preview of an image or video, giving users a quick idea about the content and serving as a primary entry point for accessing the full-size content.

The thumbnail element is used in applications to display small visual previews. It provides users with a quick idea of the content through a smaller version of an image or video and serves as a primary entry point for accessing the full-size content.

Start by linking your action to your app page using the Initial Action. Then, add a “Horizontal Stack” inside a “Vertical Stack.” Drag and drop your “Thumbnail” element into it. Next to it, add another Vertical Stack. Click on the Thumbnail element and configure its settings. From the right panel, adjust the image’s position so that it fills the available space. Use the Styling section to adjust its shape and size. Place two Label elements inside the Vertical Stack on the right. Configure the appropriate settings for each one individually.

When the application is tested, the hotel’s image appears as a small preview on the “Thumbnail” element. The hotel name and city information are listed neatly next to the image. This structure allows users to quickly get an idea of the content and provides a visually supported, readable presentation on listing screens.