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

<style include="settings-shared iron-flex">
  :host {
    --icon-width: 40px;
  }

  .sync-row {
    align-items: center;
    flex: auto;
  }

  #profile-icon {
    background: center / cover no-repeat;
    border-radius: 20px;
    flex-shrink: 0;
    height: 40px;
    width: 40px;
  }

  #syncSetupRow {
    --cr-secondary-text-color: var(--cros-sys-error);
  }

  cr-link-row {
    --cr-link-row-icon-width: var(--icon-width);
    border-top: var(--cr-separator-line);
  }

  settings-parental-controls-page {
    --cr-link-row-icon-width: var(--icon-width);
  }

  parental-controls-settings-card {
    --cr-link-row-icon-width: var(--icon-width);
  }

  .icon-container {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    width: 40px;
  }
</style>

<os-settings-animated-pages id="pages" section="[[section_]]">
  <template is="dom-if" if="[[isRevampWayfindingEnabled_]]">
    <div route-path="default">
      <account-manager-settings-card
          prefs="{{prefs}}"
          device-account="[[deviceAccount_]]">
      </account-manager-settings-card>
      <additional-accounts-settings-card
          prefs="{{prefs}}"
          accounts="[[accounts_]]">
      </additional-accounts-settings-card>
      <template is="dom-if" if="[[showParentalControls_]]">
        <parental-controls-settings-card
            prefs="{{prefs}}">
        </parental-controls-settings-card>
      </template>
    </div>
  </template>

  <template is="dom-if" if="[[!isRevampWayfindingEnabled_]]">
    <div route-path="default">
      <settings-card header-text="$i18n{osPeoplePageTitle}">
        <div class="settings-box first two-line">
          <template is="dom-if" if="[[syncStatus]]">
            <!-- Does not use <cr-link-row> due to custom aria label. -->
            <div id="profile-icon"
                style="background-image: [[getIconImageSet_(profileIconUrl_)]]"
                on-click="onAccountManagerClick_"
                actionable$="[[isAccountManagerEnabled_]]">
            </div>
            <div class="middle two-line no-min-width"
                id="profile-row"
                on-click="onAccountManagerClick_"
                actionable$="[[isAccountManagerEnabled_]]">
              <div class="flex text-elide settings-box-text">
                <span id="profile-name" aria-hidden="true">
                  [[getProfileName_(profileName_)]]
                </span>
                <div id="profile-label" class="secondary"
                    aria-hidden="true">
                  [[profileLabel_]]
                </div>
              </div>
              <cr-icon-button class="subpage-arrow"
                  hidden="[[!isAccountManagerEnabled_]]"
                  id="accountManagerSubpageTrigger"
                  aria-label="$i18n{accountManagerSubMenuLabel}"
                  aria-describedby="profile-name profile-label"
                  aria-roledescription="$i18n{subpageArrowRoleDescription}">
              </cr-icon-button>
            </div>
          </template>
        </div>
        <cr-link-row id="syncSetupRow"
            start-icon="cr:sync"
            label="$i18n{syncAndNonPersonalizedServices}"
            sub-label="[[getSyncAndGoogleServicesSubtext_(syncStatus)]]"
            on-click="onSyncClick_"
            role-description="$i18n{subpageArrowRoleDescription}">
        </cr-link-row>
        <template is="dom-if" if="[[showParentalControls_]]">
          <settings-parental-controls-page>
          </settings-parental-controls-page>
        </template>
      </settings-card>
    </div>

    <template is="dom-if" route-path="/osSyncSetup">
      <os-settings-subpage
          page-title="$i18n{syncPageTitle}"
          learn-more-url="$i18n{syncAndGoogleServicesLearnMoreURL}">
        <os-settings-sync-subpage
            sync-status="[[syncStatus]]" prefs="{{prefs}}">
        </os-settings-sync-subpage>
      </os-settings-subpage>
    </template>
    <template is="dom-if" route-path="/osSync">
      <os-settings-subpage page-title="[[getSyncAdvancedTitle_()]]"
          learn-more-url="$i18n{syncAndGoogleServicesLearnMoreURL}">
        <os-sync-controls-subpage>
        </os-sync-controls-subpage>
      </os-settings-subpage>
    </template>
    <template is="dom-if" route-path="/accountManager">
      <os-settings-subpage page-title="$i18n{accountManagerPageTitle}">
        <settings-account-manager-subpage prefs="[[prefs]]">
        </settings-account-manager-subpage>
      </os-settings-subpage>
    </template>
  </template>
</os-settings-animated-pages>