# 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="https://1972929262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2ZRtnNbqSpWk5uCfyE1A%2Fuploads%2Fgit-blob-9cc150e65e6b3d5f157475737dc1ceeb94a363f0%2Fwidget-card.png?alt=media" alt=""></td><td><mark style="color:purple;">Display content or data in a visually appealing and organized way</mark></td><td><a href="layouts-and-containers/card">card</a></td></tr><tr><td><strong>Container</strong></td><td><img src="https://1972929262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2ZRtnNbqSpWk5uCfyE1A%2Fuploads%2Fgit-blob-7d68d4a5905155a6d6006f5b212ca179b1b727bb%2Fwidget-container.png?alt=media" alt=""></td><td><mark style="color:purple;">Serves to group various widgets and elements within a single enclosing space</mark></td><td><a href="layouts-and-containers/container">container</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="layouts-and-containers/empty">empty</a></td></tr><tr><td><strong>Field</strong></td><td><img src="https://1972929262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2ZRtnNbqSpWk5uCfyE1A%2Fuploads%2Fgit-blob-1b2a1eec126bda0b77f6041bf3cd3eab5a1d7e29%2Fwidget-field.png?alt=media" 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="layouts-and-containers/field">field</a></td></tr><tr><td><strong>Flexbox</strong></td><td><img src="https://1972929262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2ZRtnNbqSpWk5uCfyE1A%2Fuploads%2Fgit-blob-496e770a5526070b0e7068252509e456c31f8316%2Fwidget-Flexbox.png?alt=media" 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="layouts-and-containers/flexbox">flexbox</a></td></tr><tr><td><strong>Grid</strong></td><td><img src="https://1972929262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2ZRtnNbqSpWk5uCfyE1A%2Fuploads%2Fgit-blob-7a17941b50ab4adf0a2d632a42fa18540d6fe4bd%2Fwidget-grid.png?alt=media" 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="layouts-and-containers/grid">grid</a></td></tr><tr><td><strong>Menu</strong></td><td><img src="https://1972929262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2ZRtnNbqSpWk5uCfyE1A%2Fuploads%2Fgit-blob-4eef77194e1b1fbac3240859f8176f8452a3c7a7%2Fwidget-menu.png?alt=media" alt=""></td><td><mark style="color:purple;">Utilizes a grid layout to organize content and widgets for easy access</mark></td><td><a href="layouts-and-containers/menu">menu</a></td></tr><tr><td><strong>One Of</strong></td><td><img src="https://1972929262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2ZRtnNbqSpWk5uCfyE1A%2Fuploads%2Fgit-blob-68b8cb9cf7f6491c9abb35d67bdcee7af572ca8c%2Fwidget-oneof.png?alt=media" 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="layouts-and-containers/oneof">oneof</a></td></tr><tr><td><strong>Sidebar</strong></td><td><img src="https://1972929262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2ZRtnNbqSpWk5uCfyE1A%2Fuploads%2Fgit-blob-7ce173dfae41db4049939773358b7a24fb1853a0%2Fwidget-sidebar.png?alt=media" alt=""></td><td><mark style="color:purple;">Provides a hideable sidebar for additional navigation or content in the UI</mark></td><td><a href="layouts-and-containers/sidebar">sidebar</a></td></tr><tr><td><strong>Stepper</strong></td><td><img src="https://1972929262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2ZRtnNbqSpWk5uCfyE1A%2Fuploads%2Fgit-blob-3cfd445611ee49b9c0a6dacadca960fd6ba58820%2Fwidget-stepper.png?alt=media" 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="layouts-and-containers/stepper">stepper</a></td></tr><tr><td><strong>RadioTabs</strong></td><td><img src="https://1972929262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2ZRtnNbqSpWk5uCfyE1A%2Fuploads%2Fgit-blob-94dc24e59e301c2e6fc4e8700cae624d63e8b5e2%2Fradio-tabs.png?alt=media" 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="layouts-and-containers/radiotabs">radiotabs</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="layouts-and-containers/tabs">tabs</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="layouts-and-containers/tabsdynamic">tabsdynamic</a></td></tr><tr><td><strong>ReloadableArea</strong></td><td><img src="https://1972929262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2ZRtnNbqSpWk5uCfyE1A%2Fuploads%2Fgit-blob-1330809ac053360a7720ec510dcacae23515359e%2FreloadableAreacard.png?alt=media" alt=""></td><td><mark style="color:purple;">Seamlessly create and change widgets within GUI</mark></td><td><a href="layouts-and-containers/reloadablearea">reloadablearea</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="layouts-and-containers/collapse">collapse</a></td></tr><tr><td><strong>Dialog</strong></td><td><img src="https://1972929262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2ZRtnNbqSpWk5uCfyE1A%2Fuploads%2Fgit-blob-9d81785cc445322a35a6cb69c49caab0e69214bb%2Fimage.png?alt=media" 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="layouts-and-containers/iframe">iframe</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="layouts-and-containers/modal">modal</a></td></tr></tbody></table>


---

# Agent Instructions: 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:

```
GET https://developer.supervisely.com/app-development/widgets/layouts-and-containers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.