Layout anatomy
The building blocks of an interactive experience are layout sections. These sections are composed of minor elements and components that share a similar function. They can also group smaller containers such as cards.
- Platform navigation
- Section navigation
- Header
- Content
Breakpoints and dimensions
Our platform is mainly designed for the desktop. We have defined one breakpoint that changed margins between content and navigation components. This breakpoint is at 1560 px width.
The navigation width does not change.
The width of content should be responsive and range from min-width 932 pixels to max-width 1778 pixels. There are some exceptions:
- The calendar in Publisher or Content Hub table where the usefulness of the full viewport is quite big.
- Smaller content sections for which you can use a fixed size of content and center them.
Content section
The content is used to display most of the app content. It typically contains components such as lists, cards, buttons, and images.
Hidden section navigation
If a section only has one section, thus one item in the navigation, it’s better to hide the navigation and use the space for body content.
The minimum and maximum widths would stay the same.
