User Profile

User profile popover shows extra details about a user or a team.

Class Type
user-profile User Profile A class representing a user profile

Components

User profiles consist of three components:

Class Type
user-profile-info Info
user-profile-sep Separator
user-profile-empty-column Empty Column
<div class="card">
  <div class="user-profile">
    <span class="avatar">UN</span>
    <span class="user-profile-info">
      <span class="name">User Name</span>
      <div class="interactive-text-output u-padding-inline-0">
        <span class="text">User ID</span>
        <div class="u-flex u-cross-child-start u-gap-8">
          <button class="interactive-text-output-button" aria-label="copy text">
            <span class="icon-duplicate" aria-hidden="true"></span>
          </button>
        </div>
      </div>
    </span>
    <span class="user-profile-sep"></span>
    <span class="user-profile-empty-column"></span>
    <span class="user-profile-info"><span class="text">Extra description</span></span>
  </div>
</div>