# Swipe page
## 👉 **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](https://docs.bravostudio.app/data-binding).
**📍 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]`](https://docs.bravostudio.app/bravo-tags/containers/aspect-ratio-relative-to-screen) 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](https://docs.bravostudio.app/data-binding) section, bind the container and the UI elements to the corresponding list data items.
## 🎨 Example design file
{% embed url="" %}
