# The container {% embed url="" %} 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. ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FzlSNn8Se94H9Lzpoe1N8%2Fimagen.png?alt=media\&token=d5e9f5d7-45d8-44bd-ba1d-1f74e27b82db) 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](https://docs.bravostudio.app/get-started/create-your-first-app#step-3-importing-the-backend) section. ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FW7FHLZgDe51YEDHESahU%2FTheContainer.gif?alt=media\&token=68f0e7c0-e6d6-4309-8148-ac0580329418) ## How to create a container You can find below how to create a container, depending on the design tool you use. {% content-ref url="the-container/setting-up-a-container-on-figma" %} [setting-up-a-container-on-figma](https://docs.bravostudio.app/set-up-design/setting-up-your-design-file/the-container/setting-up-a-container-on-figma) {% endcontent-ref %} {% content-ref url="the-container/setting-up-a-container-on-adobe-xd" %} [setting-up-a-container-on-adobe-xd](https://docs.bravostudio.app/set-up-design/setting-up-your-design-file/the-container/setting-up-a-container-on-adobe-xd) {% endcontent-ref %} ## 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*](https://docs.bravostudio.app/bravo-tags/containers/container-top-bar)*. You can have a top bar container and another container starting from the top edge of the page.* ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FOXhjUxhtwIPEzYA54BFO%2Fimagen.png?alt=media\&token=e6a7766f-5e51-4286-9bb2-f72e57d27676) 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). ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FQdvftTahNdzXlb67Fqf2%2FTheContainer%20_50%25.png?alt=media\&token=0b265ea5-721d-4ab7-baa2-0ba9ac24a70c) ## Where to add a container ### Menu page Create a container around the menu area + add the menu tag. ![Blue overlay box denotes container.](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FuwsbqMrueB99HFzecWPr%2Fimage.png?alt=media\&token=1d1be332-acc0-40b9-bd96-37fefe457d50) ### **This page have a fixed top bar** Create a container frame around the top-bar area + add the [top bar tag](https://docs.bravostudio.app/bravo-tags/containers/container-top-bar). ![Blue overlay box denotes container.](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F6q3GFMq2J1DFN8f7yzNN%2Fimage.png?alt=media\&token=5166e0fa-e900-4922-9d8c-a6e4e7881bea) ### **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. ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Fk4GWRToXOJ7cvFia46Mw%2Fimage.png?alt=media\&token=ce83ef55-a3f8-4370-8c43-d7493d0a66b0) ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Fl52xSdRAAVbbQhzxz7QZ%2Fimage.png?alt=media\&token=078457ff-6818-4a8c-9ad1-09cf6eb168a7) ### T**his 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](https://docs.bravostudio.app/bravo-tags/components/component-flexible-text). If there is anything else below, create another container below. ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FpOpdi0yDVwkCeLeYWoD2%2Fimage.png?alt=media\&token=ca088a98-cbb6-4251-8d68-28578030bcc6) ### T**his 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](https://docs.bravostudio.app/bravo-tags/containers/aspect-ratio-relative-to-screen). ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F4RfkgDfjKPSw36T8yYuV%2Fimage.png?alt=media\&token=48dbecad-9f8a-4db0-8701-bb67471e17ff) ### If you don't need to split the page with containers, c**reate one container frame to enclose all the UI elements.** ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FrN6oFVSbbYJqk4nZpLsz%2Fimage.png?alt=media\&token=095ef3da-bdc8-48c0-b52c-f6fc1b22330b)