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>