Record detail

It's on the record detail that users access most detailed information and perform specific operations. It is important to identify the main tasks that are going to be performed.

Usually content ranges from 66% to 75% of the available width, use a optional sidebar on the right for displaying controls, related information or help content.

Optionally you can use the full width of the page up to 1400px for wider layouts.

Keep in mind that:

  • Component selection, spacing, and a well-structured information hierarchy are the key factors that affect a user's efficiency to access information
  • Text with graphic can be better understood than pure text
  • Avoid confusions caused by ambiguous labels or descriptions
  • Simplify and group related fields in forms
  • On long forms use the c8y-ui-button-footer directive so the user doesn't have too scroll to the bottom of the form to click "Save" when editing
  • Use the grid system to structure the layout

Single column

When there's no need for complementary information or help content, the right column can be empty or overriden.

Tenant properties

Tenant properties

Application properties

Application properties

Device protocol detail (full width)

Device protocol detail
<div class="row">
  <div class="col-md-8 col-sm-12">
    <!-- Main content -->