> For the complete documentation index, see [llms.txt](https://developer.supervisely.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.supervisely.com/app-development/widgets/layouts-and-containers.md).

# Layouts and Containers

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Card</strong></td><td><img src="/files/ImlsUC6xGgd5TSe0wpxg" alt=""></td><td><mark style="color:purple;">Display content or data in a visually appealing and organized way</mark></td><td><a href="/pages/ORCvLAMQgnqPWa1q1Mdg">/pages/ORCvLAMQgnqPWa1q1Mdg</a></td></tr><tr><td><strong>Container</strong></td><td><img src="/files/DqxA24VyAOX8nVgnph4O" alt=""></td><td><mark style="color:purple;">Serves to group various widgets and elements within a single enclosing space</mark></td><td><a href="/pages/BEIolvahyazCFTcKLNW5">/pages/BEIolvahyazCFTcKLNW5</a></td></tr><tr><td><strong>Empty</strong></td><td></td><td><mark style="color:purple;">Used to insert blank spaces within the user interface to improve layout and spacing</mark></td><td><a href="/pages/1QmE6ndhM7Mrfo4T0tNv">/pages/1QmE6ndhM7Mrfo4T0tNv</a></td></tr><tr><td><strong>Field</strong></td><td><img src="/files/uJzeGoMdjrPXy5zLyiWY" alt=""></td><td><mark style="color:purple;">Titled area in the UI, typically used to display data or content associated with the title</mark></td><td><a href="/pages/6qrf7jFCkavQva4m7WG8">/pages/6qrf7jFCkavQva4m7WG8</a></td></tr><tr><td><strong>Flexbox</strong></td><td><img src="/files/meLz3Z2TK7SQRwhZf35V" alt=""></td><td><mark style="color:purple;">Layout that allows for the creation of flexible and responsive container elements to organize widgets</mark></td><td><a href="/pages/KTqQUBZsZis9RgPJIDcH">/pages/KTqQUBZsZis9RgPJIDcH</a></td></tr><tr><td><strong>Grid</strong></td><td><img src="/files/JdEdRsko802VGeR10YR8" alt=""></td><td><mark style="color:purple;">Enables the addition of a structured menu or other complex layouts to the user interface</mark></td><td><a href="/pages/0UzKwtPqmOWtB49PDbnr">/pages/0UzKwtPqmOWtB49PDbnr</a></td></tr><tr><td><strong>Menu</strong></td><td><img src="/files/2qsh6AkDh3HQUGJCWcvm" alt=""></td><td><mark style="color:purple;">Utilizes a grid layout to organize content and widgets for easy access</mark></td><td><a href="/pages/oGgr1nYudLHKAcSsijnO">/pages/oGgr1nYudLHKAcSsijnO</a></td></tr><tr><td><strong>One Of</strong></td><td><img src="/files/nWZXyJEhqU9Vf6SKM7W3" alt=""></td><td><mark style="color:purple;">Allows the selection from different content options to be displayed at one time</mark></td><td><a href="/pages/YcWGNt9etSkB2WjeU6Bf">/pages/YcWGNt9etSkB2WjeU6Bf</a></td></tr><tr><td><strong>Sidebar</strong></td><td><img src="/files/zGiVnapt2pD8mmEYIqHO" alt=""></td><td><mark style="color:purple;">Provides a hideable sidebar for additional navigation or content in the UI</mark></td><td><a href="/pages/ap45OxgYHnDK8gons8Dz">/pages/ap45OxgYHnDK8gons8Dz</a></td></tr><tr><td><strong>Stepper</strong></td><td><img src="/files/q4Aipu5DUJ6GJikavzco" alt=""></td><td><mark style="color:purple;">Helps in breaking down a process or workflow into distinct steps for better organization</mark></td><td><a href="/pages/FrIr3ZM0BoPKDOdUUEJe">/pages/FrIr3ZM0BoPKDOdUUEJe</a></td></tr><tr><td><strong>RadioTabs</strong></td><td><img src="/files/Fza5vB7bxsh4smhgHHRU" alt="" data-size="original"></td><td><mark style="color:purple;">Offers a way to switch between different sections of content using tabs that function like radio buttons</mark></td><td><a href="/pages/wI34eVWEd0PsH7InOyPG">/pages/wI34eVWEd0PsH7InOyPG</a></td></tr><tr><td><strong>Tabs</strong></td><td><img src="https://user-images.githubusercontent.com/79905215/224063450-5616bc8b-a09b-4d58-8c72-37821ca3f79a.png" alt="" data-size="original"></td><td><mark style="color:purple;">Сlickable tabs to make it easier to work with and navigate between various content parts.</mark></td><td><a href="/pages/zcAC7ZKsBm2Ffvvm3VfA">/pages/zcAC7ZKsBm2Ffvvm3VfA</a></td></tr><tr><td><strong>TabsDynamic</strong></td><td><img src="https://user-images.githubusercontent.com/120389559/222425009-48e94882-6a1a-4cf5-9383-45bc98dc4bb9.png" alt="" data-size="original"></td><td><mark style="color:purple;">This feature allows for the addition of editable tabs, enhancing flexibility and user interaction within the UI</mark></td><td><a href="/pages/ZZJijfmxHz4524HTY5TA">/pages/ZZJijfmxHz4524HTY5TA</a></td></tr><tr><td><strong>ReloadableArea</strong></td><td><img src="/files/YVELjlxpBh1CV1Jlb5aP" alt=""></td><td><mark style="color:purple;">Seamlessly create and change widgets within GUI</mark></td><td><a href="/pages/w3XX2gERYBkh9xAZ4GaF">/pages/w3XX2gERYBkh9xAZ4GaF</a></td></tr><tr><td><strong>Collapse</strong></td><td><img src="https://github-production-user-asset-6210df.s3.amazonaws.com/118521851/264578122-42d9851b-f2b7-4157-ba9e-7a57a35b6cf7.png" alt=""></td><td><mark style="color:purple;">Designed to create collapsible regions within the UI, helping to manage space by showing or hiding content as needed</mark></td><td><a href="/pages/MLM8oRG6n9pqwn6urWun">/pages/MLM8oRG6n9pqwn6urWun</a></td></tr><tr><td><strong>Dialog</strong></td><td><img src="/files/owtbigF6R0JIa0YnHu8z" alt="" data-size="original"></td><td><mark style="color:purple;">Pop-up tool for alerts or user confirmations</mark></td><td></td></tr><tr><td><strong>IFrame</strong></td><td><img src="https://github.com/supervisely-ecosystem/ui-widgets-demos/assets/48913536/fdfaf53a-36a9-4306-9a93-125f11578814" alt="" data-size="original"></td><td><mark style="color:purple;">Useful for displaying custom html content within your application</mark></td><td><a href="/pages/3IdO4p8YPBELACPCpJSp">/pages/3IdO4p8YPBELACPCpJSp</a></td></tr><tr><td><strong>Modal</strong></td><td><img src="https://github.com/supervisely-ecosystem/ui-widgets-demos/releases/download/v0.0.8/screenshot-localhost-8000-1765988335167.png" alt="" data-size="original"></td><td><mark style="color:purple;">Useful for displaying content in a modal overlay window with customizable size and content</mark></td><td><a href="/pages/CR7NwRHhuwM5e390ckOD">/pages/CR7NwRHhuwM5e390ckOD</a></td></tr></tbody></table>