# Swipe page

## 👉 **The Tag** <a href="#the-tag" id="the-tag"></a>

Creates a horizontal or vertical **swipe component**, which occupies the whole app screen. The list of elements in the component can be created in the design file, or created dynamically with [API data](/data-binding/data-binding-types.md).

**📍 Where to add the tag:** A top-level app page.

```
[page-swipe:vertical] -> vertical slide effect
[page-swipe:horizontal] -> horizontal slide effect
```

![](/files/NMbRVcaoTbMFQ0kbkqvY)

## 🏷️ **How to add the tag** <a href="#how-to-add-the-tag" id="how-to-add-the-tag"></a>

1\. Create a screen design for the vertical swipe. Add the `[page-swipe:vertical]` or `[page-swipe:horizontal]` tag to the top-level app screen component.

![](/files/3qcZtZotn8JitmDuZ8CM)

<figure><img src="/files/1GT5Ti13H784aNDnp2H3" alt=""><figcaption></figcaption></figure>

2\. Create a single `[container]` element covering the whole screen and wrapping all the individual UI elements of the swipe component (images, texts...). Add the [`[aspectratio:screen]`](/bravo-tags/containers/aspect-ratio-relative-to-screen.md) tag to the container, to avoid undesired scrollings in devices with smaller screens.

![](/files/GEQyGxfrWebnOOoZahU6)

3\. If you want to have a **static list** (created in the design file) for the swipe component, create several containers with the corresponding UI elements, and put them one on top of another.

4\. If you want to **populate the list dynamically with API data**, create a single container with all the UI elements that will be bound to data. Then, in the [data binding](/data-binding/data-binding-types.md) section, bind the container and the UI elements to the corresponding list data items.

## 🎨 Example design file

{% embed url="<https://www.figma.com/community/file/1125815853125858367>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bravostudio.app/bravo-tags/pages/swipe-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
