Layout Concepts


The main way to organize content in Matico is through panes,the main building blocks of the UI. They are the containers that hold content and can be resized, moved, and closed. We have a growing list of available feature panes, and there are also several types of container panes, allowing for nested content, such as a scrolling article with rows of panes.

Panes can be dragged and dropped using the visual interface, or sizing can be specified in the editor sidebar, as pixel values or as percentages of the parent element.


Pages allow you to organize content into distinct pages with routes, names, and icons. Adding a page to your Matico app adds a new layout to the left hand navigation bar, which you can customize with a page name and icon. Each page has a route (eg.**docs**) which you can also specify in the page editor.

By default, all pages provide you with a single free layout (see layout types for more info), but you can use a single parent container pane to make pages into vertical or horizontal scrolls, tabbed layouts, or more.


All panes can be specified with either pixel or percent units. Pixel units are fixed, regardless of the parent or viewing screen, and percent units are relative to the parent element. For scrolling layouts, percents use the screen size as the parent element.

Responsive Layouts

Coming soon!