> For the complete documentation index, see [llms.txt](https://docs.in8sync.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.in8sync.com/client-admin-guide/getting-started/layout-components.md). # Layout Components The structural scaffolding for every page — rows, columns, grids, navigation bars, modals, tabs, and spacing. Layout components are the scaffolding that holds every other block in place. Rows go side-by-side, Columns stack vertically, Grids tile uniformly, Flex handles awkward cases, and Header/Sidebar Nav define page chrome. Each layout block has its own module-type availability — see the sections below for specifics. ## When you'd reach for this category | I want to... | Use... | | ------------------------------------------------- | ------------------------------------------------- | | Place components side by side | **Row** + **Column** | | Stack components vertically | (just stack them, or use Column) | | Create a uniform grid of tiles | **Grid** | | Have complex alignment or dynamic sizing | **Flex** | | Add empty spacing between sections | **Space** | | Visually separate sections with a horizontal rule | **Divider** | | Group content into tabbed sections | **Tabs** | | Open content in a pop-up | **Modal** | | Build a transaction browser with filters | **Transaction List** | | Add a top nav | **Header Nav** (Header Navigation modules only) | | Add a sidebar nav | **Sidebar Nav** (Sidebar Navigation modules only) | ## Row Arranges its children horizontally — the building block for any side-by-side layout. A horizontal container. Drop **Column** components inside, and they sit side by side. Rows handle the spacing and wrapping; the columns inside handle their own width. ### Available in * All module types ### When to use * Anywhere you want components side-by-side: a heading + button, a stat card row, a side-by-side form layout. * As the outer container of a multi-column page section. * As the building block whenever you'd say "two things next to each other." For complex alignment or dynamic sizing, reach for **Flex** instead. For uniform tile grids, use **Grid**. ### Settings | Setting | Description | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | **Gap** | Spacing in pixels between child columns. Default: 24. | | **Wrap** | Whether children wrap to a new line when they run out of horizontal space. Yes / No. Default: Yes. | | **Printable** | Whether this row appears in the print stylesheet. Default: No. | | **Border** | Visual border around the row. Options: Width (pixels), Color (any CSS color or theme variable), Radius (corner rounding, in pixels). | | **Background Color** | Fill color for the row background. Any CSS color or theme variable. | ### How it works A Row only accepts **Column** children — drag-drop is restricted to columns. Inside each column you can put any other block. The Gap setting becomes flex-gap. Width and alignment of each column are configured on the column itself, not on the row. {% hint style="info" %} Set **Wrap** to *Yes* (default) so the layout collapses gracefully on smaller screens. Setting it to *No* forces a horizontal scroll on narrow viewports. {% endhint %} ### Examples **Header row.** A Row containing two Columns: one with a Heading (left), one with a Button (right). Set Gap to 16. **Three-card stats bar.** A Row with three Columns, each holding a Stats block. Wrap=Yes so they restack on mobile. ## Column A vertical container that lives inside a Row — defines its own width and aligns its children. A vertical container designed to sit inside a **Row**. The column controls how wide it is (1/2, 1/3, 1/4 of the row, etc.) and how its children align horizontally. ### Available in * All module types ### When to use * Inside any Row to define a vertical slot. * For multi-column layouts where each column has different content. * When you need control over how wide each section of a Row is. For stacking content outside a Row, you can use plain blocks (they stack naturally) — Column is most useful as a Row child. ### Settings | Setting | Description | | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Width** | The fraction of the parent Row this column occupies. Options: 1/1 (100%), 1/2 (50%), 1/3 (33%), 1/4 (25%), 2/3 (66%), 3/4 (75%), or None (auto). Default: None. | | **Alignment** | How children are aligned horizontally inside the column: Default, Left, Center, Right. Default: Default. | | **Printable** | Whether this column appears in the print stylesheet. Default: No. | | **Border** | Visual border around the column. Options: Width (pixels), Color (any CSS color or theme variable), Radius (corner rounding, in pixels). | | **Background Color** | Fill color for the column background. Any CSS color or theme variable. | ### How it works When a Width is set, the column gets a fixed flex-basis (with a small offset for the Row's gap). When Width is *None*, the column expands to fill remaining space. Minimum width is 200px when unconstrained. Drop any block inside — Cards, Stats, Headings, Forms — they stack vertically and obey the Alignment setting. {% hint style="info" %} For a 50/50 split, set both columns to Width *1/2*. For a sidebar + main content layout, try 1/3 + 2/3. The columns automatically reflow on smaller screens when the parent Row has Wrap enabled. {% endhint %} ### Examples **50/50 form layout.** Row with two Columns at 1/2 each. Left column: Customer Select + Address. Right column: Order Lines summary. **Sidebar + content.** Row with Column at 1/4 (sidebar nav) and Column at 3/4 (main content). **Centered card.** Single Column at 1/2, Alignment=Center, with one Card inside — produces a centered, half-width card. ## Grid A uniform grid of cells — pick a column count, drop content in, and every cell sizes the same. A CSS-Grid container where every child cell is the same size. Pick the number of columns and the gap, then drop blocks in. The grid automatically wraps content into rows. ### Available in * All module types ### When to use * Dashboards with several stat cards or quick-access tiles in a uniform grid. * Product card grids (when not using Catalog Display, which has its own grid). * Anywhere you want to drop N items and have them lay out in a clean N-column grid without manually managing rows. For non-uniform sections (e.g. one wide column + two narrow), use **Row + Column** instead. ### Settings | Setting | Description | | --------------------- | --------------------------------------------------------------- | | **Number of columns** | Number of grid columns. Range: 1–12. Default: 4. | | **Gap** | Spacing in pixels between cells. Default: 24. | | **Printable** | Whether this grid appears in the print stylesheet. Default: No. | ### How it works Children render into the next available cell automatically — no need to define rows. With 4 columns set and 8 children, you get 2 rows of 4. With 6 children, you get 1 row of 4 plus 1 row of 2. The grid uses CSS Grid under the hood, so cells maintain equal width even with different content. {% hint style="info" %} Grid disallows **Hero** and **Stats** as direct children — those blocks are designed for full-width or row-based layouts and don't fit a grid cell. Use Row + Column for those. {% endhint %} ### Examples **Dashboard tile grid.** Grid with 3 columns, gap 24. Drop 6 Card Link components inside — produces 2 rows of 3 quick-access tiles. **Product spec grid.** Grid with 2 columns. Drop pairs of Heading + Text blocks for a clean spec sheet. **Action launcher.** Grid with 4 columns, gap 16. Drop 8 Cards (one per common action) for a launcher screen. ## Flex A flexible container with full control over direction, justification, wrapping, and spacing — for layouts Row/Column/Grid can't quite handle. A flexbox container with control over direction, justification, wrap, and spacing. Use Flex when **Row**, **Column**, and **Grid** can't get the layout you need — for example, when you want children to align in unusual ways or grow/shrink dynamically. ### Available in * All module types ### When to use * A row where one child should grow to fill remaining space and others stay fixed-size. * Layouts that need to switch direction (row vs column) based on context. * Justified groups (e.g. content centered or pushed to the end). * Anywhere Row/Column don't give you the exact alignment you need. For most simpler layouts, prefer **Row + Column** — they're easier to reason about. Reach for Flex only when you actually need its extra knobs. ### Settings | Setting | Description | | ------------------- | -------------------------------------------------------------------------------- | | **Direction** | Row (horizontal) or Column (vertical). Default: Row. | | **Justify Content** | How children distribute along the main axis: Start, Center, End. Default: Start. | | **Gap** | Spacing in pixels between children. Default: 24. | | **Wrap** | Whether children wrap when they overflow: Wrap or No-wrap. Default: Wrap. | | **Printable** | Whether this Flex container appears in the print stylesheet. Default: No. | ### How it works Flex applies CSS flexbox to its container with the configured direction, justification, gap, and wrap settings. Children sit inside, with their alignment driven by the container. Flex disallows **Hero** and **Stats** as direct children (same as Grid) — those don't behave well inside flex containers. {% hint style="info" %} For most layouts, **Row** is simpler and reads better in the editor. Reach for Flex when you need centered justification, a column-direction container, or fine control over wrapping. {% endhint %} ### Examples **Centered call-to-action.** Flex with direction=Row, justify=Center. Drop a Heading + Action Button inside — they sit centered together. **Vertical stack with even spacing.** Flex with direction=Column, gap=16. Children stack vertically with consistent spacing. **Push-to-end layout.** Flex with direction=Row, justify=End. Useful for action button rows where you want the buttons aligned to the right. ## Space Adds blank space between sections — a simple visual breather that's more reliable than padding tricks. A no-content block whose only job is to add empty space. Drop it between sections to create a visual breather without fiddling with each block's padding. ### Available in * All module types ### When to use * Between major sections of a page where padding alone isn't enough. * To separate a Heading from the content below. * Anywhere you need a precise pixel gap that doesn't depend on parent gap settings. For consistent spacing across many blocks, prefer adjusting the parent Row/Grid's *gap* — Space is for one-off needs. ### Settings | Setting | Description | | ------------- | ---------------------------------------------------------------------------------------- | | **Size** | The amount of space, in 8px increments from 8px to 160px. Default: 24px. | | **Direction** | *Vertical* (height), *Horizontal* (width when inside a Row), or *Both*. Default: *Both*. | ### How it works Space renders as an invisible div with the configured size. Direction determines whether it adds height (vertical), width (horizontal), or both. In a Column or stacked layout, vertical space pushes the next block down. In a Row, horizontal space pushes the next block right. ### Examples **Section separator.** Heading "Recent Orders" → Space (size 32, vertical) → Report Widget. Clean visual gap without touching either block's padding. **Form section break.** Inside a vertical form, drop a Space (size 16) between each major group of fields. ## Divider A horizontal rule for visually separating sections of a page — configurable thickness, colour, width, and vertical margin. A simple horizontal line for separating sections of a page. Use Divider when whitespace alone isn't enough to break up content — for example, between major sections of a long form or between groups of cards. ### Available in * All module types ### When to use * Between major sections of a page where you want a clear visual break. * After a heading group when the next section is unrelated content. * Inside a card or panel to separate header from body. For consistent spacing without a line, use **Space** instead. For complex layout breaks, use **Row** + **Column**. ### Settings | Setting | Description | | ------------------- | -------------------------------------------------------------------------------------------------------- | | **Thickness** | Line thickness — Thin (1px), Medium (2px), or Thick (4px). Default: Thin. | | **Color** | Any CSS color — hex (`#ccc`), name (`gray`), or theme variable (`var(--border)`). Default: theme border. | | **Width** | How wide the line stretches across its container — `100%`, `50%`, `200px`, etc. Default: 100%. | | **Vertical Margin** | Empty space above and below the line. Default: 16px. | ### Examples **Section break.** Drop a Divider between two top-level sections — Default settings work for most pages. **Half-width centered rule.** Set Width to `50%`. The Divider centers automatically and creates a softer break than a full-width line. **Heavy emphasis.** Set Thickness to `Thick (4px)` and Color to your brand accent colour for a deliberate, attention-grabbing separator. ## Tabs Group content into tabs — each tab holds its own components. A tabbed container. Define a list of tabs, give each one a label, and drop content blocks into each tab's slot. The user clicks between tabs to switch the visible content. ![Tabs block with three labelled tabs and the active tab's content visible below](https://229581143-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAG04Mxmhw6PLRAZBvhtK%2Fuploads%2Fgit-blob-34c4157b44c2abdfcee87ba5f9215f89b1e8b0bb%2Fpb-tabs.png?alt=media) ### Available in * All module types ### When to use * Product detail pages with separate sections (Description / Specifications / Vendor / Reviews). * Settings screens with grouped options. * Any page where related content should share screen space without scrolling. * Account pages with sub-sections (Profile / Orders / Payment Methods). For sequential flows where the user moves through one step at a time, use **Stepper** patterns inside a single page instead. ### Settings | Setting | Description | | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | **Tabs Configuration** | An array of tabs. Each tab has its own ID, label, display order, and content slot. Use the array editor to add, remove, and reorder tabs. | | **Default Active Tab ID** | The tab that's open when the page first renders. Leave empty to default to the first tab. | | **CSS Classes** | Additional CSS classes to apply to the tab container — for fine-tuning appearance from a CSS block. | Each tab in the configuration has: * **Tab ID** — unique identifier (auto-generated if you don't set one). * **Tab Label** — text shown on the tab. * **Display Order** — number controlling tab order, 1–20. * **Tab Content** — the slot where you drop child blocks. ### How it works Tabs render as a horizontal list at the top, with the active tab's content slot below. Tabs are sorted by their Display Order. When the user clicks a tab, only that tab's content is shown. The unmounted tabs aren't fully removed — their state is preserved between switches. Each tab (and the Tabs block itself) can have visibility rules applied, so you can show or hide tabs based on user role, workflow state, or other conditions. {% hint style="info" %} Use distinct, stable Tab IDs (auto-generated is fine) so you can target a specific tab in **Default Active Tab ID** even after reordering. {% endhint %} ### Examples **Product detail page.** Tabs with three entries: *Description*, *Specifications*, *Vendor*. Description tab holds a long Product Field. Specifications holds a Grid of Product Fields. Vendor holds a Product Vendor block. **Account page.** Tabs with *Profile* / *Orders* / *Addresses*. Each tab holds the relevant entity blocks. **Reports drill-down.** Tabs with *Daily* / *Weekly* / *Monthly*. Each tab holds a Report Widget configured for the matching date range. ## Modal A pop-up dialog with Header, Body, Footer slots. A pop-up dialog with three content slots — Header, Body, Footer. The modal opens when triggered (typically from a **Button** with the modal's ID configured) and closes when the user dismisses it or another action closes it. ### Available in * All module types ### When to use * Confirmation dialogs ("Are you sure you want to void this order?"). * Detail views that pop over the page (click a row in a Report Widget → see full detail in a Modal). * Multi-step forms where each step is a pop-up. * Category pickers, product pickers, or other selection flows that need focus. For switching between in-page sections without overlay, use **Tabs** instead. ### Settings | Setting | Description | | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Modal ID** | A unique identifier for this modal. Other blocks (typically Buttons) reference this ID to open or close the modal. Hidden in Modal-type modules — there the ID comes from the module page itself. | | **Modal Size** | Width: Small, Medium, Large, Extra Large, or Full Width. Default: Medium. | | **Hide Close Button** | Hide the close (X) button in the top right of the modal. Yes / No. Default: No. | | **Show When Module Loads** | Automatically open this modal when the page first renders. Yes / No. Default: No. | | **Show Frequency** | Control how often the auto-open modal appears: Every Time or Once Per Session. Shown when "Show When Module Loads" is Yes. Default: Every Time. | | **Header Content** | Slot for the modal title row — usually a Heading. | | **Dialog Content** | Slot for the main body — drop any blocks here. | | **Footer Content** | Slot for action buttons (Cancel, Confirm, etc.). | ### How it works In edit mode, the modal renders as if it's open so you can lay out its content. At runtime, the modal stays closed until something opens it: 1. A **Button** (or **Action Button**) configured with the matching Modal ID is clicked. 2. The modal slides into view, overlaying the page. 3. The user interacts with the content, or clicks Cancel / outside / the close icon to dismiss. 4. A Button inside the modal can close it (using the **Close Modal** dropdown). {% hint style="info" %} For pop-up triggers and the standard open/close pattern, see the [Button](/client-admin-guide/getting-started/content-components.md#button) documentation — Button has dedicated **Open Modal** and **Close Modal** dropdowns that automatically populate with the modals on the current page. {% endhint %} ### Examples **Confirmation dialog.** Modal with *Modal ID* = "confirm-void". Header: "Confirm Void". Body: a Text block explaining consequences. Footer: two Buttons — Cancel (closeModal=confirm-void), Void (with the void action). Triggered from a Void button on the order detail page. **Detail-on-click.** Modal with a Transaction Record inside. A Report Widget row click sets a session variable; the modal opens via an Action Button bound to that variable change. **Category picker.** Modal containing a Category Sidebar. Trigger from a "Browse Categories" Button. Closes itself when the user picks a category. ## Header Nav The top navigation bar for portals using a horizontal header. The top navigation bar for portals that use a horizontal header rather than a sidebar. Configure Header Nav by clicking **Configure Header Navigation** to open a modal with three tabs: **Navigation** (define menu items and structure), **Logo** (upload or link a logo with styling), and **Styling** (set colors for light and dark modes, header height, and compact options). ![Header Nav rendered as a horizontal bar with logo, nav items, and one item showing its dropdown of sub-items](https://229581143-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAG04Mxmhw6PLRAZBvhtK%2Fuploads%2Fgit-blob-23942fb20c40b9130cd341f5fa3987d402c99a30%2Fpb-header-nav.png?alt=media) ### Available in * Header Navigation modules **only** Header Nav is the canonical block of the Header Navigation module type. For sidebar-style navigation, use [Sidebar Nav](#sidebar-nav). ### When to use * Portal layouts where the primary navigation lives at the top. * Brand-forward portals (B2C, public-facing) where the header sets the visual tone. * Any workflow that uses the Header Navigation module type. For internal portals with deeper nav structures, **Sidebar Nav** is usually a better fit. ### Settings Configuration is managed through the **Configure Header Navigation** modal. Within the modal: **Navigation tab:** * **Menu Items** — array of nav items. Each item has a label, page reference, icon, and optional sub-items (one level, rendered as dropdowns). * **Page ID** — dropdown of available pages in the workflow (auto-populated). Points the menu item to a workflow page. * **Link** — custom link shown when no page is selected. This field appears in the configuration modal when no Page ID is chosen. **Logo tab:** * **Logo Image** — upload a logo file or provide an image URL. * **Alt Text** — alternative text for the logo. * **Logo Link** — optional link the logo navigates to when clicked. * **Width / Height** — dimensions for the logo. * **Fit** — how the image scales within its dimensions (e.g., contain, cover). **Styling tab:** * **Light Mode Colors** — background, text, hover, active, border, dropdown colors for light theme. * **Dark Mode Colors** — same color options for dark theme. * **Header Height** — vertical space the header occupies. * **Start Colors from Theme** — optionally inherit colors from your theme instead of defining custom ones. * **Compact Options** — sizing controls for subsidiary and user account areas in the header. **Header content slots:** The header also includes three configurable content areas (Left, Center, Right) where you can drop header components like search boxes, notifications, or other interactive elements. ### How it works The navigation items are loaded dynamically — the **Page ID** dropdown shows all pages in the current workflow that aren't navigation modules themselves. When a user clicks an item with sub-items, a dropdown appears. Items without sub-items navigate directly. {% hint style="info" %} **Page ID** wins over Link. If both are set, the link goes to the configured page. The Link field appears in the editor only when no Page ID is chosen. {% endhint %} ### Examples **Brand portal.** Configure Header Nav with *Home*, *Catalog*, *Orders*, *Account* as menu items. In Styling tab, use brand colors for light and dark modes. Upload a logo in the Logo tab. Leave header slots empty or add a search box in the Right slot. **Internal admin shortcut.** Menu items: *Dashboard*, *Reports*, *Settings*. Styling: compact header height, corporate colors. Right slot: notifications component. **Two-tier menu.** Menu structure: *Catalog* (sub-items: Browse, Categories, New Arrivals), *Account* (sub-items: Profile, Orders, Sign Out). Logo linked to home page. ## Header Search A global search box that lives in one of the header content areas (usually center or right). Users type a query and either see live suggestions or go to a results page. ### Available in * Header Navigation modules only, placed inside the header content areas (Left / Center / Right). ### When to use * Portal-wide search across orders, customers, products, or records. * A quick lookup bar at the top of every page, without giving up page space. ### Settings | Setting | Description | | ---------------- | --------------------------------------------------------------------------------------------------------------------- | | **Placeholder** | Hint text in the search box. Default: *Search…*. | | **Search Scope** | What the search looks through — orders, customers, items, and so on. | | **Search Mode** | *Autocomplete* (live suggestions as you type) or *Navigate to Results* (opens a results page). Default: Autocomplete. | ### How it works The user types in the header search box. Results appear as they type (Autocomplete) or the app opens a results page (Navigate to Results). Search respects each user's permissions — people only see records they're allowed to see. {% hint style="info" %} Header Search is for quick, everyday lookups. For complex, filtered searching use the **Transaction List** block on a dedicated page. {% endhint %} ## Header Notifications A notification bell in the header content area. It shows an unread count and opens a dropdown of recent notifications. ### Available in * Header Navigation modules only, placed inside the header content areas (Left / Center / Right). ### When to use * Alerting users to order status changes, approvals needed, or system messages. * A persistent notifications hub without a dedicated page. ### Settings | Setting | Description | | ---------------- | ----------------------------------------------------------------------- | | **Badge Style** | How the badge looks — a dot, a count, or just the icon. Default: Count. | | **Max Display** | How many notifications the dropdown shows at once. Default: 10. | | **Auto Refresh** | How often the app checks for new notifications. | ### How it works The bell shows a count of unread notifications. Clicking it opens a dropdown of recent items, each with a message and, where relevant, a link to the related page. Users can open a notification to go straight to what it's about. ## Sidebar Nav The vertical navigation panel for sidebar layouts. The vertical navigation panel for portals with a sidebar layout. Group navigation into sections, each with its own list of items, sub-items (rendered as collapsibles), and icons. Configure Sidebar Nav by clicking **Configure Sidebar Navigation** to open a modal where you define navigation sections, styling (light and dark colors), and the optional footer area. This is the canonical block for the Sidebar Navigation module type — typically the most common navigation pattern for SphericalBRM portals. ![Sidebar Nav rendered with two grouped sections, each containing nav items with icons](https://229581143-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAG04Mxmhw6PLRAZBvhtK%2Fuploads%2Fgit-blob-dab32c96d00b398bc4fa89ee0c3c98bf189b297f%2Fpb-sidebar-nav.png?alt=media) ### Available in * Sidebar Navigation modules **only** For top-bar navigation, use [Header Nav](#header-nav) instead. ### When to use * Internal admin portals where users move through many distinct workspaces. * POS workflows where the operator switches between Place Order, EOD, Reports, etc. * Any workflow that uses the Sidebar Navigation module type. * Whenever the navigation has more than \~5 items — vertical lists scale better than horizontal nav. ### Settings Configuration is managed through the **Configure Sidebar Navigation** modal. **Navigation tab:** | Setting | Description | | ----------------------- | -------------------------------------------------------------------------- | | **Navigation Sections** | Array of sections. Each section has a title and its own list of nav items. | Each section has: * **Section Title** — the section header shown above the items. Each item inside a section has: * **Label** — the text shown. * **Page ID** — dropdown of available pages in the workflow (auto-populated). * **Icon** — Lucide icon name. * **Sub Items** — optional nested array, rendered as a collapsible group. Same fields as parent items. **Styling tab:** * **Light Mode Colors** — background, item text, section heading text, hover, active, border, nested item, and collapsed state colors for light theme. * **Dark Mode Colors** — same color options for dark theme. * **Start Colors from Theme** — optionally inherit colors from your theme instead of defining custom ones. **Footer area:** A slot at the bottom of the sidebar for placing content (typically a Card). Use this to surface account info, a settings button, or any other persistent bottom action. ### How it works Sections render as grouped headers in the sidebar with their items beneath. Items with sub-items collapse and expand on click; items without sub-items navigate directly. The **Page ID** dropdown is populated dynamically from the current workflow's modules — only pages, not nav modules, appear in the list. Active state is applied automatically to the item matching the current route. The footer area appears as a fixed slot at the very bottom of the sidebar, above any scroll edge. {% hint style="info" %} Group related items into sections (e.g. *Sales* / *Reports* / *Settings*) — sectioned sidebars scan faster than long flat lists. {% endhint %} ### Examples **Cashier sidebar.** One section "Main" with items *Place Order*, *Pay Invoice*, *Customer Lookup*, *EOD Reports*. Light/dark colors configured in Styling tab. No footer. **Store Manager sidebar.** Three sections — *Sales* (Place Order, Pay Invoice), *Reports* (EOD, Sales Summary, Inventory), *Admin* (Users, Settings). Footer area holds a Card with quick links to admin settings. **Sales Rep sidebar.** Sections *Customers* (Search, Recent), *Orders* (New, History, Drafts), *Account* (Profile, Targets). Footer shows user profile card. ## Transaction List A specialised layout for transaction-listing pages with filter and table slots. A purpose-built layout container for transaction-list pages. Provides a top **Filters** slot and a bottom **Table** slot, with controls for spacing and an optional Clear All Filters button. This block is the standard wrapper for any page where the user is browsing transactions with filters. ![Transaction List layout with filter controls in the top section, a Clear All Filters button below them, and a results table beneath](https://229581143-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAG04Mxmhw6PLRAZBvhtK%2Fuploads%2Fgit-blob-87a8ae987f8e590e180afc5302da8388a89df79a%2Fpb-transaction-list.png?alt=media) ### Available in * Page modules * Reports modules Transaction List is purpose-built for the transaction-listing pattern in Page and Reports modules. It isn't available in Order Form, Catalog, Dashboard, Modal, or Navigation modules. ### When to use * Any Page module that displays a filterable transaction list — orders, invoices, fulfilments, returns. * Whenever you'd otherwise build a manual two-row layout with filters on top and a table below — this block has the right defaults baked in. For dashboards or report pages without filtering, use a simple Row + Report Widget instead. ### Settings | Setting | Description | | --------------------------------- | ------------------------------------------------------------------------------------------------------------ | | **Gap** | Spacing in pixels between the filter section and the table. Range: 0–100. Default: 24. | | **Hide Filter Section** | Hide the filters slot entirely. Show / Hide. Default: Show. | | **Show Search Button** | Display a Search button below the filters that opens the transaction search. Yes / No. Default: No. | | **Show Clear All Filters Button** | Display a button that clears every active transaction filter. Default: No. | | **Buttons Position** | Where the Search and Clear buttons sit when shown: Under filters left or Under filters right. Default: Left. | | **Filters** | Slot for filter blocks — typically Transaction List Filter, Customer Select, etc. | | **Table slot** | Slot for the results table — typically Transaction List or a configured Report Widget. | ### How it works The block renders as a vertical flex container: 1. **Filters slot** at the top (hidden if Hide Filter Section is on). 2. The optional Clear All Filters button below filters, positioned left or right. 3. **Table slot** at the bottom, with a minimum empty height of 200px so the editor canvas doesn't collapse. When Hide Filter Section is on, the gap between filters and table goes to 0 (since there's nothing above the table). The Clear All Filters button calls the global transaction-filter clear action, which resets every filter block on the page in one go. {% hint style="info" %} For pages with a single filter, the Clear All Filters button is overkill. Enable it when you have three or more filter blocks and want to give users a quick reset. {% endhint %} ### Examples **Order history page.** Transaction List with Filters slot containing Transaction List Filter (date range, status). Table slot containing Transaction List configured for sales orders. Clear All Filters enabled, position right. **Invoice browser.** Transaction List with Customer Select + Transaction List Filter in the Filters slot, Transaction List in the Table slot, Hide Filter Section off, gap 32. ## Related
Layout & ResponsiveHow layouts collapse on smaller screens.Layout & Responsive Design
Common PatternsReady-made layouts for dashboards, order forms, and POS pages.Common Page Patterns
Content ComponentsThe presentational blocks that go inside layout containers.Content Components