Empty state

A list that doesn’t contain any items, an empty dashboard or a search that doesn’t display any results are examples of empty states.

Page empty state

Use in full page lists or large elements. Usually provides shortcuts for common actions like adding a new item and/or help & documentation links.

No reports to display.

Add your first report using the button below.

Find out more on the User Guide.

<div class="c8y-empty-state text-center">
  <h1 class="c8y-icon c8y-icon-report c8y-icon-duocolor"></h1>
  <h3 translate="">No reports to display.</h3>
  <p translate="">Add your first report using the button below.</p>
  <p>
    <button class="btn btn-primary ng-binding" data-ng-click="add()">
      <i c8y-icon="plus" class="fa fw fa-plus"></i> Add report
    </button>
  </p>
  <p><small translate="">Find out more on the <a c8y-guide-href="http://cumulocity.com/guides/users-guide/cockpit/#reporting" class="ng-scope" href="https://www.cumulocity.com/guides/users-guide/cockpit/#reporting" target="_blank">User Guide</a>.</small></p>
</div>
  

List empty state

Use in elements like dashboard widgets, cards or panels.

No alarms to display.

No datapoints found. You must add at least one datapoint.
Find out more on the user guide.

<div class="c8y-empty-state text-left">
    <h1 class="c8y-icon c8y-icon-controls"></h1>
    <p><strong>No datapoints found.</strong> You must add at least one datapoint.
      <br><small>Find out more on the <a href="http://cumulocity.com/guides/users-guide/cockpit/#visualize" target="_blank" >User guide</a>.</small>
    </p>
  </div>