chromium/components/policy/resources/webui/status_box.html

<style>
:host(:not([hidden])) {
  display: block;
}

.status-box-fields {
  background-color: var(--status-box-background);
  border: none;
  border-radius: var(--element-border-radius);
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 1px 10px 10px 10px;
}

.status-box-heading {
  font-weight: 500;
}

div.status-entry * {
  white-space: pre-wrap
}

div.status-entry:not([hidden]) {
  display: flex;
  justify-content: space-between;
  margin-bottom: .6em;
}

.status-entry-value {
  text-align: right;
}

div.status-entry:last-child {
  margin-bottom: 0;
}

a {
  color: var(--link-color);
  cursor: pointer;
  text-decoration: underline;
}

.warning {
  max-width: 312px;
}
</style>
<div class="status-box-fields">
  <p class="status-box-heading"></p>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelVersion}</div>
    <div class="version status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelMachineEnrollmentMachineName}</div>
    <div class="machine-enrollment-name status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelMachineEnrollmentDomain}</div>
    <div class="machine-enrollment-domain status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelMachineEnrollmentToken}</div>
    <div class="machine-enrollment-token status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelMachineEntrollmentDeviceId}</div>
    <div class="machine-enrollment-device-id status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelUsername}</div>
    <div class="username status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelManagedBy}</div>
    <div class="managed-by status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelGaiaId}</div>
    <div class="gaia-id status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelClientId}</div>
    <div class="client-id status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelProfileId}</div>
    <div class="profile-id status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelAssetId}</div>
    <div class="asset-id status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelLocation}</div>
    <div class="location status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelDirectoryApiId}</div>
    <div class="directory-api-id status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelTimeSinceLastFetchAttempt}</div>
    <div class="time-since-last-fetch-attempt status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelTimeSinceLastRefresh}</div>
    <div class="time-since-last-refresh status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelRefreshInterval}</div>
    <div class="refresh-interval status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelPoliciesPush}</div>
    <div class="policy-push status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelStatus}</div>
    <div class="status status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelIsAffiliated}</div>
    <div class="is-affiliated status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelIsOffHoursActive}</div>
    <div class="is-offhours-active status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelVersion}</div>
    <div class="version status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelLastCloudReportSentTimestamp}</div>
    <div class="last-cloud-report-sent-timestamp status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelError}:</div>
    <div class="error status-entry-value"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelWarning}:</div>
    <div class="warning status-entry-value"></div>
  </div>
</div>