Avatar

The avatar component, prefixed by gds-avatar, can display a user's photo, a brand's logo, or a flag icon for internationalization. The avatar can include a dropdown menu, which is meant to be shown when the avatar is clicked on. To show the dropdown menu, add the gds-avatar--menu-open class to gds-avatar. As with bubble menu and filter components, the button that invokes the avatar menu should contain a gds-bubble-button attribute with a value that points at some form of selector for the menu it corresponds to.

Demo

<div className="gds-avatar">
    <div className="gds-avatar__image" data-gds-bubble-button="[data-gds-bubble-menu='avatar']" data-gds-active-className="gds-avatar__image--active">
        <img src="https://assets.ggops.com/images/ken.png" height="100%" alt="Ken Weiner" />
    </div>
    <div className="gds-avatar__menu" data-gds-bubble-menu="avatar">
        <ul className="gds-avatar__menu-list">
            <li className="gds-avatar__menu-list-item -ellipsis -p-h-3 -p-v-2">Ken Weiner</li>
            <li className="gds-avatar__menu-list-divider"></li>
            <li className="gds-avatar__menu-list-item -ellipsis"><a data-gds-bubble-closer className="gds-avatar__menu-list-link" href="#">Profile</a></li>
            <li className="gds-avatar__menu-list-item -ellipsis" data-gds-bubble-closer ><a className="gds-avatar__menu-list-link" href="#">Settings</a></li>
            <li className="gds-avatar__menu-list-divider"></li>
            <li className="gds-avatar__menu-list-item -ellipsis"><a data-gds-bubble-closer className="gds-avatar__menu-list-link" href="#">Logout</a></li>
        </ul>
    </div>
</div>

<div className="gds-avatar">
    <div className="gds-avatar__image" data-gds-bubble-button="[data-gds-bubble-menu='avatar']" data-gds-active-className="gds-avatar__image--active">
        <img src="https://assets.ggops.com/images/ken.png" height="100%" alt="Ken Weiner" />
    </div>
    <div className="gds-avatar__menu" data-gds-bubble-menu="avatar">
        <ul className="gds-avatar__menu-list">
            <li className="gds-avatar__menu-list-item -ellipsis -p-h-3 -p-v-2">Ken Weiner</li>
            <li className="gds-avatar__menu-list-divider"></li>
            <li className="gds-avatar__menu-list-item -ellipsis"><a data-gds-bubble-closer className="gds-avatar__menu-list-link" href="#">Profile</a></li>
            <li className="gds-avatar__menu-list-item -ellipsis" data-gds-bubble-closer ><a className="gds-avatar__menu-list-link" href="#">Settings</a></li>
            <li className="gds-avatar__menu-list-divider"></li>
            <li className="gds-avatar__menu-list-item -ellipsis"><a data-gds-bubble-closer className="gds-avatar__menu-list-link" href="#">Logout</a></li>
        </ul>
    </div>
</div>

Error Log

State

gds-bubble__menu--menu-open

gds-avatar__image--active

Color (Context)

gds-avatar__image--dark

gds-avatar__menu--dark

gds-avatar__menu-list--dark

gds-avatar__menu-list-link--dark

gds-avatar__menu-list-divider--dark

gds-avatar__menu-list-item--dark