chromium/chrome/browser/resources/ash/settings/os_people_page/account_manager_settings_card.html

<style include="settings-shared">
  .account-manager-description {
    color: var(--cr-secondary-text-color);
    display: block;
    max-width: 560px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .account-manager-description.full-width {
    max-width: none;
  }

  .profile-icon {
    --profile-icon-size: 40px;
    background: center / cover no-repeat;
    border-radius: 50%;
    flex-shrink: 0;
    height: var(--profile-icon-size);
    width: var(--profile-icon-size);
  }

  .profile-icon.device-account-icon {
    --profile-icon-size: 60px;
    margin-top: 8px;
  }

  .device-account-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
  }

  .device-account-container .primary {
    font-weight: 500;
    margin-top: 8px;
  }

  .managed-badge {
    --badge-offset: calc(100% - var(--badge-size)
                         - 2 * var(--padding-size));
    --badge-size: 10px;
    --padding-size: 4px;
    background: var(--cros-icon-color-prominent);
    border-radius: 50%;
    height: var(--badge-size);
    left: var(--badge-offset);
    padding: var(--padding-size);
    position: relative;
    top: var(--badge-offset);
    width: var(--badge-size);
  }

  .managed-badge > iron-icon {
    --iron-icon-fill-color: var(--cros-bg-color-elevation-1);
    --iron-icon-height: var(--badge-size);
    --iron-icon-width: var(--badge-size);
    display: block;
  }

  .managed-message {
    color: var(--cr-secondary-text-color);
    justify-content: center;
    margin-top: 16px;
  }

  .managed-message > iron-icon,
  .managed-message > cr-icon-button {
    margin-inline-end: 5px;
  }

  :host-context([dir='rtl']) .managed-badge {
    left: auto;
    right: var(--badge-offset);
  }

  :host-context(body.revamp-wayfinding-enabled) #managedUserIcon {
    --iron-icon-fill-color: var(--cros-sys-secondary);
  }
</style>

<settings-card header-text="$i18n{accountManagerPageTitle}">
  <div class="settings-box first account-manager-description full-width">
    <localized-link
        localized-string="[[getAccountManagerDescription_()]]"
        link-url="$i18nRaw{accountManagerLearnMoreUrl}">
    </localized-link>
  </div>

   <!-- Managed account badge and message -->
   <template is="dom-if" if="[[isDeviceAccountManaged_]]">
    <div class="settings-box managed-message">
      <template is="dom-if" if="[[!isChildUser_]]">
        <iron-icon id="managedUserIcon" icon="[[managedByIcon_]]"></iron-icon>
      </template>
      <template is="dom-if" if="[[isChildUser_]]">
        <cr-icon-button iron-icon="cr20:kite"
            on-click="onManagedIconClick_">
        </cr-icon-button>
      </template>
      <localized-link
          localized-string=
            "[[getManagementDescription_(isChildUser_, deviceAccount)]]"
          link-url="$i18nRaw{accountManagerChromeUIManagementURL}">
      </localized-link>
    </div>
  </template>

  <!-- Primary account icon, name and email -->
  <div class="device-account-container hr"
      aria-labelledby="deviceAccountFullName"
      aria-describedby="deviceAccountEmail">
    <div class="profile-icon device-account-icon"
        aria-hidden="true"
        style="background-image: [[getIconImageSet_(deviceAccount)]]">
      <template is="dom-if"
          if="[[shouldShowManagedBadge_(isDeviceAccountManaged_,
                isChildUser_)]]">
        <div class="managed-badge">
          <iron-icon icon="cr:work"></iron-icon>
        </div>
      </template>
    </div>
    <span id="deviceAccountFullName" class="primary" aria-hidden="true">
      [[deviceAccount.fullName]]
    </span>
    <span id="deviceAccountEmail" class="secondary" aria-hidden="true">
      [[deviceAccount.email]]
    </span>
  </div>
</settings-card>