An interface's structure is defined by the relation of space and layout sections. Their combination creates room for displaying content in a meaningful way.

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.

Layout Anatomy
  1. Platform navigation
  2. Section navigation
  3. Header
  4. 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:

  1. The calendar in Publisher or Content Hub table where the usefulness of the full viewport is quite big.
  2. Smaller content sections for which you can use a fixed size of content and center them.
Content - Flex - Medium
Content - Flex - Large
Content - Fixed - Nav hidden


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.

Navigation - Hidden