/

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

To get started, create the table on the screen using “New SQL Action” from the “Tables” section in the Data Sources module. First click the “Test” button, then click “Create” to save it. Start by connecting an “Initial Action” to your page. Next, add a “Horizontal Stack” inside a “Vertical Stack.” Drag and drop your “Thumbnail” element into it. Click on your “Thumbnail” element and configure it. From the right panel, adjust the image’s position so that the imported image fills the space. Use the “Styling” section to adjust its shape and size. Next to it, add another “Vertical Stack.” Place two “Label” elements inside the right-hand “Vertical Stack.” Configure each one individually as needed.

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 neatly listed next to the image. This structure allows users to quickly get an idea of the content and ensures a visually supported, readable presentation on listing screens.