These layout components are essential for structuring the pages of your application. They provide flexibility and consistency in content arrangement.

​
MainLayout

MainLayout is a comprehensive layout component wrapping the main page content, supporting sidebars and top bars for navigation or additional information. 
<MainLayout
  sideBars={
    [
      /* sidebars */
    ]
  }
  topBars={
    [
      /* top bars */
    ]
  }
>
  {/* children */}
</MainLayout>
  • sideBars: Positioned on the sides, used for navigation or extra content.
  • topBars: Positioned at the top, used for breadcrumbs, titles, or page actions.

​
PageContainer

PageContainer offers consistent padding and background color for the enclosed content, typically used within MainLayout. 
<PageContainer backgroundColor="color-surface">{/* children */}</PageContainer>
  • backgroundColor: Sets a predefined background color for visual hierarchy.

​
SizedContainer

SizedContainer controls content width with predefined or custom sizes. 
<SizedContainer size={ContainerSizes.M} customSize={300}>
  {/* children */}
</SizedContainer>
  • size: A predefined size controlling maximum width.
  • *customSize: A custom maximum width in pixels.

​
SplitLayout

SplitLayout divides the screen into two sections, adaptable for various layouts like dashboards or detail views. 
<SplitLayout leftChild={/* left content */} rightChild={/* right content */}>
  {/* children */}
</SplitLayout>
  • flexDirection: Horizontal (“row”) or vertical (“column”) split.
  • maxWidthLeft, maxWidthRight, minWidthLeft, minWidthRight: Control widths of sections.
  • useAsPage: Indicates full-page use, affecting responsiveness.
  • collapseable: Allows for responsive collapsing.
  • placeholder: Displays when the right section is empty.

​
Graphical Representation

Here’s a simple visual representation of these layouts: 
MainLayout
+-------------------------------------------+
| TopBar1   TopBar2                         |
| +---------------------------------------+ |
| | SideBar1 | PageContainer              | |
| |          | +------------------------+ | |
| |          | | SizedContainer         | | |
| |          | +------------------------+ | |
| +---------------------------------------+ |
+-------------------------------------------+

SplitLayout (row)
+-------------------------------------------+
| +------------------+ +------------------+ |
| | LeftChild        | | RightChild       | |
| |                  | |                  | |
| +------------------+ +------------------+ |
+-------------------------------------------+

SplitLayout (column)
+-------------------------------------------+
| +---------------------------------------+ |
| | LeftChild                             | |
| +---------------------------------------+ |
| +---------------------------------------+ |
| | RightChild                            | |
| +---------------------------------------+ |
+-------------------------------------------+
Each layout has a distinct purpose and can be combined to craft intricate and visually appealing page structures. Consider the content relationship and how these layouts can enhance usability and aesthetics when designing your pages.