SIA Web Design Library

User account: Logged In Gravatar

No notes defined.

<div class='c-user-account'>
    <nav id='user-account-navigation' class='c-user-account__nav js-has-toggler' role='navigation'>
        <button class="js-toggle c-button--icon c-user-account__js-toggle" aria-expanded="false" aria-controls="user-account-menu">
            <span class='u-photo c-headshot c-user-account__headshot'>
                <img class='c-headshot__image' src='https://www.gravatar.com/avatar/2edb25de296c1f4a3993de6d65a9b964?d=identicon&s=400' alt='' title='' />
            </span> </button>
        <ul id="user-account-menu" class="c-menu c-menu--toc">
            <li class="
            c-menu__item 
             
                c-menu__item--current 
             
             
            "><a class="
                c-menu__item__link 
                                " href=''>My account</a> </li>
            <li class="
            c-menu__item 
             
             
            "><a class="
                c-menu__item__link 
                                " href=''>Log out</a> </li>
        </ul>
    </nav>
</div>
 
<div class='{{ get_component_class( 'user-account', display ) }}'>
    <nav id='user-account-navigation' class='c-user-account__nav js-has-toggler' role='navigation'>
        <button class="js-toggle c-button--icon c-user-account__js-toggle" aria-expanded="false" aria-controls="user-account-menu">
            {% if headshot %}
                {% include '@unit/headshot/headshot.twig' with headshot %}
            {% else %}
                {% include '@unit/avatar/avatar.twig' with avatar %}
            {% endif %}
        </button>
        {% include '@unit/menu/menu.twig' with menu %}
    </nav>
</div>
 
{
  "headshot": {
    "display": {
      "component": "user-account"
    },
    "src": "https://www.gravatar.com/avatar/2edb25de296c1f4a3993de6d65a9b964?d=identicon&s=400"
  },
  "menu": {
    "id": "user-account-menu",
    "display": {
      "modifiers": [
        "toc"
      ]
    },
    "items": [
      {
        "title": "My account",
        "in_active_trail": true
      },
      {
        "title": "Log out"
      }
    ]
  }
}