chromium/chrome/browser/resources/chromeos/arc_account_picker/arc_account_picker_app.html

<style include="account-manager-shared">
  :host {
    --account-item-height: 44px;
    --account-item-width: 366px;
    --account-item-padding: 16px;
    --account-item-margin: 12px;
    --account-icon-size: 44px;
    --account-icon-margin: 12px;
  }

  .main-container {
    height: 100%;
    overflow-y: scroll;
  }

  .google-full-logo {
    /* The same size as in webview. */
    width: 74px;
  }

  .secondary {
    color: var(--cr-secondary-text-color);
  }

  .primary {
    font-size: 15px;
    line-height: 22px;
  }

  .text-body {
    margin-bottom: 32px;
  }

  .account-item {
    align-items: center;
    border: 1px solid var(--google-grey-300);
    border-radius: 16px;
    display: flex;
    flex-direction: row;
    height: var(--account-item-height);
    margin-bottom: var(--account-item-margin);
    padding: var(--account-item-padding);
    width: var(--account-item-width);
  }

  .account-item:hover {
    background-color: rgba(var(--google-blue-500-rgb), .08);
    border-color: rgba(var(--google-blue-600-rgb), .3);
    cursor: pointer;
  }

  .account-item:focus {
    border: 2px solid var(--google-blue-600);
    height: calc(var(--account-item-height) - 2px);
    width: calc(var(--account-item-width) - 2px);
  }

  .account-icon {
    background: center / cover no-repeat;
    border-radius: 50%;
    flex-shrink: 0;
    height: var(--account-icon-size);
    margin-inline-end: var(--account-icon-margin);
    width: var(--account-icon-size);
  }

  .account-name {
    display: flex;
    flex-direction: column;
  }

  .account-name > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(var(--account-item-width) - 2*var(--account-item-padding)
                - var(--account-icon-size) - var(--account-icon-margin));
  }

  #addAccountButton > .account-icon {
    background-color: var(--google-grey-100);
  }

  #addAccountButton > .account-icon > .add-icon {
    -webkit-mask-image: url(chrome://resources/images/add.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    background-color: var(--google-grey-700);
    height: 80%;
    margin: 10%;
    width: 80%;
  }

  #addAccountButton > .account-name > .primary {
    margin-bottom: 0;
  }

  .use-two-column-layout.main-container {
    /* Add top margin to account for the button bar and match next pages */
    --margin-top: 96px;
    display: flex;
    flex-direction: row;
    height: calc(100% - var(--margin-top));
    margin-top: var(--margin-top);
  }

  .use-two-column-layout .column-1 {
    flex: 1 1 0;
    margin-inline-end: 80px;
  }

  .use-two-column-layout .column-2 {
    flex: 1.5 1 0;
    /* Size of the icon + margin */
    margin-top: calc(24px + 28px);
  }
</style>

<div class$="[[getMainContainerClass_(useTwoColumnLayout)]]">
  <div class="column-1">
    <if expr="_google_chrome">
      <img class="google-full-logo"
              src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90" alt="">
    </if>

    <h1>$i18n{accountManagerDialogArcAccountPickerTitle}</h1>
    <p class="secondary text-body"
      >$i18nRaw{accountManagerDialogArcAccountPickerBody}</p>
  </div>

  <div class="column-2">
    <template is="dom-repeat" id="accountsContainer" items="[[accounts_]]">
      <div class="account-item" on-click="makeAvailableInArc_"
          on-keypress="onAccountKeyPress_"
          tabindex="0" role="button"
          aria-labelledby$="fullName-[[index]] email-[[index]]"
          aria-description="$i18n{accountUseInArcButtonLabel}">
        <div class="account-icon" aria-hidden="true"
            style="background-image: [[getIconImageSet_(item.image)]]">
        </div>
        <div class="account-name">
          <span class="primary" id="fullName-[[index]]"
              aria-hidden="true">[[item.fullName]]</span>
          <span class="secondary" id="email-[[index]]"
              aria-hidden="true">[[item.email]]</span>
        </div>
      </div>
    </template>

    <div class="account-item" id="addAccountButton" on-click="addAccount_"
        on-keypress="onAddAccountKeyPress_" tabindex="0" role="button"
        aria-label="[[getAddAccountButtonLabel_(isChildUser_)]]">
      <div class="account-icon" aria-hidden="true">
        <div class="add-icon"></div>
      </div>
      <div class="account-name" aria-hidden="true">
        <span class="primary">[[getAddAccountButtonLabel_(isChildUser_)]]</span>
      </div>
    </div>
  </div>

</div>