> For the complete documentation index, see [llms.txt](https://docs.bravostudio.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bravostudio.app/set-up-design/setting-up-your-design-file/the-container.md). # 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. ![](/files/d4MAsdKhqmv8SkmBSACH) 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. ![](/files/RSrmbrC6kwOVVkuCuUwV) ## How to create a container You can find below how to create a container, depending on the design tool you use. {% content-ref url="/pages/Ut0ai92UkNJ4zvNzE7Sq" %} [Setting up a container on Figma](/set-up-design/setting-up-your-design-file/the-container/setting-up-a-container-on-figma.md) {% endcontent-ref %} {% content-ref url="/pages/GeW8hCI4ym43FNQ0GQMB" %} [Setting up a container on Adobe XD](/set-up-design/setting-up-your-design-file/the-container/setting-up-a-container-on-adobe-xd.md) {% 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*](/bravo-tags/containers/container-top-bar.md)*. You can have a top bar container and another container starting from the top edge of the page.* ![](/files/H6x2uuFfajNrdJDJh5Px) 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). ![](/files/itRnISRniFnWhFTxRPjD) ## Where to add a container ### Menu page Create a container around the menu area + add the menu tag. ![Blue overlay box denotes container.](/files/s0mTqkmfHlFGrtLW1hpN) ### **This page have a fixed top bar** Create a container frame around the top-bar area + add the [top bar tag](/bravo-tags/containers/container-top-bar.md). ![Blue overlay box denotes container.](/files/GbI5KMminPhaZ1NppIn3) ### **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. ![](/files/FJMXKqOyf2zRyfXNP99u) ![](/files/1XXeBQIrRDGwNfnNTKRb) ### 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](/bravo-tags/components/component-flexible-text.md). If there is anything else below, create another container below. ![](/files/t2wkg17fJJG8CwETN31M) ### 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](/bravo-tags/containers/aspect-ratio-relative-to-screen.md). ![](/files/sbPw1alFri4pYSx9E105) ### If you don't need to split the page with containers, c**reate one container frame to enclose all the UI elements.** ![](/files/a4rlCt8HCSyhVAofhGl5) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.bravostudio.app/set-up-design/setting-up-your-design-file/the-container.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.