The container
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
You can find below how to create a container, depending on the design tool you use.
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 *.
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).
Create a container around the menu area + add the menu tag.
Create one container around the list item design. In case you have other non-list UI elements, create containers around them too.
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 section.
*Except for the . You can have a top bar container and another container starting from the top edge of the page.
Create a container frame around the top-bar area + add the .
Create a container so that the text box is the bottom-most element in the container + add the . If there is anything else below, create another container below.
Create a container frame around the design that needs to maintain its ratio to designed screen size + add the .