🧱The container

For a design file to be Bravo-ready, you must add [containers]. These are components placed as a 2nd-level layer: inside ("nested" in) the app page and containing the different UI elements.

Containers have two main functions:

• Wrap the individual UI elements (images, text, etc.) in the design.

• Allow to create lists in the app page. Each container can be bound to API data that will make the container populate to a list in the app. To create a list, a placeholder list element needs to be created in the design, and wrapped in a container. How to connect the API data is further explained in the step 3 of Create your first app section.

How to create a container

You can find below how to create a container, depending on the design tool you use.

Setting up a container on FigmaSetting up a container on Adobe XD

Container guidelines

Containers must:

• Start the first container from the top of the app page component.

• Include the padding of your design within the container.

• They should not overlap one another *.

*Except for the top bar container. You can have a top bar container and another container starting from the top edge of the page.

If a container is <50% of the screen width, it will stack horizontally and then vertically down (when connected to API data to populate it into a list).

Where to add a container

Menu page

Create a container around the menu area + add the menu tag.

Blue overlay box denotes container.

This page have a fixed top bar

Create a container frame around the top-bar area + add the top bar tag.

Blue overlay box denotes container.

This page has a list design that will be populated with API data later

Create one container around the list item design. In case you have other non-list UI elements, create containers around them too.

This screen has a text box that will be populated with API data and can be different amount of text from your design

Create a container so that the text box is the bottom-most element in the container + add the flexo text tag. If there is anything else below, create another container below.

This screen has a design that needs to be the same aspect ratio across all device sizes (Ex: it must be full screen on all devices)

Create a container frame around the design that needs to maintain its ratio to designed screen size + add the aspect ratio to screen tag.

If you don't need to split the page with containers, create one container frame to enclose all the UI elements.