Application Layout

A properly structured layout enforces an optimal, consistent experience across applications.

Layout

layout full box 1440px width screen

Main container

The main container is a vertical flexbox which wraps the following components:

Platform header

  • App header
  • Collapsible Left Panel
  • Right panel

Platform header

The platform header is located above the application canvas. It gives the user access to their global platform settings as well as the Commure app store.

Application Header

Application Header

The application header component is used to display the primary navigation. The suggested content of the primary navigation includes:

  • the app logo and/or name
  • a list of links to navigate within the main sections of the app
  • icons to represent notifications and a link to the app settings
  • the current user’s profile name

Collapsible Left Panel

Collapsible Left Panel

The Collapsible Left Panel can be used to house a secondary navigation menu or picker that will change the content in the main app canvas. Left Panel opens on buttons on collapsed menu bar on left side of screen.

Right Panel

Right Panel

The Right Panel can be used to show more details about a certain object or person. Right side panels open on any trigger. Focus does not change when side sheet opens so user can still view all elements on screen.

Components

Components

Commure's React components are the building blocks that allow you to design and build healthcare applications with ease.