# Modal pages

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

This tag, placed on a top-level app page, creates a page that slides in from the bottom and covers the  screen.

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

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FCg86ph24XSTdoxFPEL5H%2FScreen-Recording-2024-02-26-at-13.14.42.gif?alt=media\&token=3155414b-f050-4c13-bd31-4ca85d5f7f8a)

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

1. On a blank app page, create a Modal page design.
2. Use the tag that you prefer the most for modal page.

## Types of modal pages

### Page modal 100%

This modal will always be 100% of the mobile screen and this is a fix modal. Use this tag:

```
[page:modal]
```

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F8jBUZycy1zOdUMPZR9Ne%2FModal%20pages2.jpg?alt=media\&token=038ec099-9647-4777-a278-fb36fe73b577)

### Page modal % Size

Define the percentage number of the screen that your modal will shown up. Could be scrollable! Make it as long as you want. Several samples here:

```
Size 30% [page:modal:30%] 
Size 50% [page:modal:50%]
Size 70% [page:modal:70%]
Size 90% [page:modal:90%]
```

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FobYeRTmI8mpYyDArOs9d%2FModal%20pages3.jpg?alt=media\&token=00445871-2973-4605-988e-eeb00417dae1)

### Page Modal Fixed Size

Add the following tag in case you want the modal to be fixed:

```
Page Fixed [page:modal:fixed]
```

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FkZvc3HM66rxzuD9fAfiL%2FModal%20pages4.jpg?alt=media\&token=9876980d-18c5-4c6c-bec9-f1b82e38e4ca)

### iOs Cards Modal Type

This type of Modals are just working in iOs. This will be a 100% screen modal and scrollable! Add this tag:

```
iOs cards [page:modal][ios:cards]
```

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FClNy9WaDSd3hXN2J5Pxy%2FModal%20pages5.jpg?alt=media\&token=31fa6957-a6ca-4272-bd41-bf7f3a369e29)

{% hint style="info" %}
🔥 Important: Noticed that for the experience you will close them with a swipe down.
{% endhint %}

Now you can do the prototyping! Import to Bravo & preview on Bravo Vision 🚀

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FYeTqXood5O8EwiacdSCV%2FModal%20pages6.jpg?alt=media\&token=5b55b7ea-5b99-4fe1-94b8-1a204545ce29)

## 💾 Example files <a href="#example-files" id="example-files"></a>

Duplicate the files below to see how to set it up!

{% embed url="<https://www.figma.com/community/file/967380255651810770/bravo-sample-modal-pages>" %}