Modal pages

Pages that slides in from the bottom and covers the screen.

👉 The Tag

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

🏷️ How to add the tag

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]

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%]

Page Modal Fixed Size

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

Page Fixed [page:modal:fixed]

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]

🔥 Important: Noticed that for the experience you will close them with a swipe down.

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

💾 Example files

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

Bravo Sample: Modal Pages | Figma CommunityFigma