User Identifier Stable

The User Identifier contains the user avatar and some user information (user name and affiliated institution). It is displayed in the Application Bar.

Logged in user with avatar

Markus Mustermann Siemens Healthineers

My Profile My Services Log Out

<div class="user-identifier dropdown dropdown--right js-dropdown">
  <button class="user-identifier__toggle-button dropdown__toggle">
    <div class="user-identifier__avatar">
        <img src="/ui-marcom/version/2.2/assets/img/brandville/sm11052_CS_03.jpg" />
    </div>
    <span class="user-identifier__details">
      <span class="user-identifier__name">Markus Mustermann</span>
      <span class="user-identifier__company">Siemens Healthineers</span>
    </span>
  </button>
  <div class="menu dropdown__panel">
    <a class="menu__item" href="https://my.siemens-healthineers.com/profile">My Profile</a>
    <a class="menu__item" href="https://my.siemens-healthineers.com/">My Services</a>
    <a class="menu__item" href="#">Log Out</a>
  </div>
</div>

Logged in user without avatar

<div class="user-identifier dropdown dropdown--right js-dropdown">
  <button class="user-identifier__toggle-button dropdown__toggle">
    <div class="user-identifier__avatar">
        <div class="user-identifier__initials">MM</div>
    </div>
    <span class="user-identifier__details">
      <span class="user-identifier__name">Markus Mustermann</span>
      <span class="user-identifier__company">Siemens Healthineers</span>
    </span>
  </button>
  <div class="menu dropdown__panel">
    <a class="menu__item" href="https://my.siemens-healthineers.com/profile">My Profile</a>
    <a class="menu__item" href="https://my.siemens-healthineers.com/">My Services</a>
    <a class="menu__item" href="#">Log Out</a>
  </div>
</div>

Not Logged in user without avatar

<div class="user-identifier dropdown dropdown--right js-dropdown">
  <button class="user-identifier__toggle-button dropdown__toggle">
    <div class="user-identifier__avatar">
        <svg class="user-identifier__svg" width="40px" height="40px" viewBox="0 0 32 32" version="1.1"
          xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <g id="user-avatar-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path id="circle" fill="#E6E6E6"
              d="M32.0001135,16 C32.0001135,24.836556 24.836556,32 16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,-0.000113513871 16,-0.000113513871 C20.2483552,-0.0160216238 24.3273333,1.66454242 27.3313954,4.66860456 C30.3354576,7.67266669 32.0160216,11.7516448 32.0001135,16 Z">
            </path>
            <path id="avatar" fill="currentColor"
              d="M19,19 L26,21 C27.3752877,21.4678023 28.217809,22.8537498 28,24.29 L28,24.29 L27.7,26.88 C27.1457227,27.4742787 26.5473543,28.0258473 25.91,28.53 C20.0872795,33.1462682 11.8527205,33.1462682 6.03,28.53 C5.41208458,28.0286113 4.83061719,27.4839034 4.29,26.9 L4.29,26.9 L4,24.29 C3.78219099,22.8537498 4.62471227,21.4678023 6,21 L6,21 L13,19 L16,22 L19,19 Z M16,4 C18.78,4 21,6.91 21,10.5 C21,14.09 18.76,17 16,17 C13.24,17 11,14.09 11,10.5 C11,6.91 13.22,4 16,4 Z">
            </path>
          </g>
        </svg>
    </div>
    <span class="user-identifier__details">
      Log In / Register
    </span>
  </button>
  <div class="menu dropdown__panel">
    <a class="menu__item" href="#">Log In</a>
    <a class="menu__item" href="https://my.siemens-healthineers.com/registration/personal">Register</a>
  </div>
</div>