> For the complete documentation index, see [llms.txt](https://docs.bravostudio.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bravostudio.app/bravo-tags/pages/swipe-page.md).
# Swipe page
Add a component with a vertical swipe effect
## 👉 **The Tag**
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
```
## 🏷️ **How to add the tag**
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.
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.
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="" %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.bravostudio.app/bravo-tags/pages/swipe-page.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.
