# 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><p><img src="https://github.com/supervisely-ecosystem/ui-widgets-demos/assets/48913536/fdfaf53a-36a9-4306-9a93-125f11578814" alt=""></p></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><p><img src="https://github.com/supervisely-ecosystem/ui-widgets-demos/releases/download/v0.0.8/screenshot-localhost-8000-1765988335167.png" alt=""></p></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>