User Profile

Open in Figma View all renders 
<div class="user-profile">
    <div class="user-profile__bubble">
        SG
    </div>
    <div class="user-profile__content">
        <p class="user-profile__name">Sam Green</p>
        <p class="user-profile__type">Main Driver</p>
        <p class="user-profile__edit">Edit</p>
    </div>
</div>

User Profile Secondary

<div class="user-profile user-profile--secondary">
    <div class="user-profile__bubble">
        SG
    </div>
    <div class="user-profile__content">
        <p class="user-profile__name">Sam Green</p>
        <p class="user-profile__type">Main Driver</p>
        <p href="#" class="user-profile__edit">Edit</p>
    </div>
</div>

Variations and modifiers

User Profile Small

The user profile can be small. By default it is medium. 

<div class="user-profile user-profile--small">
    <div class="user-profile__bubble">
        SG
    </div>
    <div class="user-profile__content">
        <p class="user-profile__name">Sam Green</p>
        <p class="user-profile__type">Main Driver</p>
        <p class="user-profile__edit">Edit</p>
    </div>
</div>

User Profile Inline

User profile will render stacked by default. It can be rendered inline with the bubble to the left of the text. 

<div class="user-profile user-profile--inline">
    <div class="user-profile__bubble">
        SG
    </div>
    <div class="user-profile__content">
        <p id="user-profile-inline-name" class="user-profile__name">Sam Green</p>
        <p id="user-profile-inline-type" class="user-profile__type">Main Driver</p>
        <p class="user-profile__edit">Edit</p>
    </div>
</div>

User Profile Bubble Only

This will render only the bubble. We should still include the content as that will be accessible to screen readers to provide the user context of what the initials in the bubble mean. 

<div class="user-profile user-profile--bubble-only">
    <div class="user-profile__bubble">
        SG
    </div>
    <div class="user-profile__content">
        <p class="user-profile__name">Sam Green</p>
        <p class="user-profile__type">Main Driver</p>
        <p class="user-profile__edit">Edit</p>
    </div>
</div>

User Profile Bubble Only Stacked

This will render only the bubble, with subsequent drivers stacked behind the previous one. Note that a parent container with user-profile-stacked-wrapper is needed for the stacking. We should still include the content as that will be accessible to screen readers to provide the user context of what the initials in the bubble mean. 

<div class="user-profile-stacked-wrapper">
    <div class="user-profile user-profile--bubble-only">
        <div class="user-profile__bubble">
            SG
        </div>
        <div class="user-profile__content">
            <p class="user-profile__name">Sam Green</p>
            <p class="user-profile__type">Main Driver</p>
        </div>
    </div>
    <div class="user-profile user-profile--bubble-only user-profile--secondary">
        <div class="user-profile__bubble">
            JR
        </div>
        <div class="user-profile__content">
            <p class="user-profile__name">Jerry Reed</p>
            <p class="user-profile__type">Additional Driver</p>
        </div>
    </div>
    <div class="user-profile user-profile--bubble-only user-profile--secondary">
        <div class="user-profile__bubble">
            JA
        </div>
        <div class="user-profile__content">
            <p class="user-profile__name">John Appleseed</p>
            <p class="user-profile__type">Additional Driver</p>
        </div>
    </div>
</div>