Account Hero 

<div class="account-hero" data-module="accountHero" data-user-profile-endpoint=/data/user-profile.json>
    <div class="grid-container grid-layout__row">
        <div class="grid-x align-center grid-padding-x spacer-md">
            <div class="cell account-hero__content medium-8">
                <div class="account-hero__profile">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72.42 72.42">
                        <circle cx="36.21" cy="36.21" r="34.71" style="fill:none;stroke:#00875a;stroke-width:3px" />
                        <path d="M45.26,27.16a9,9,0,1,1-9-9,9,9,0,0,1,9,9Zm-4.52,0a4.53,4.53,0,1,0-4.54,4.52h0A4.56,4.56,0,0,0,40.74,27.16ZM36.21,38.47c-6,0-18.11,3-18.11,9.06v6.79H54.32V47.53C54.32,41.51,42.25,38.47,36.21,38.47ZM22.63,47.55v2.24H49.79V47.53C49.34,45.92,42.32,43,36.21,43S23.08,45.92,22.63,47.55Z" style="fill:#00875a;fill-rule:evenodd" />
                    </svg>
                    <h2 class="account-hero__title js-account-title"></h2>
                </div>
                <div>
                    <ul class="account-hero__meta">
                        <li>
                            <span class="account-hero__meta-title">accountCreated</span>
                            <span class="account-hero__meta-text">31st March 2020</span>
                        </li>
                        <li>
                            <span class="account-hero__meta-title">Community level</span>
                            <span class="account-hero__meta-text">Newbie</span>
                        </li>
                    </ul>
                    <div class="account-hero__logout">
                        <a href="/api/ui/accountapi/LogoutUser" class="button-p2 button-p2--with-icon js-account-logout">Logout</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="account-hero" data-module="accountHero" data-user-profile-endpoint={{userProfileEndpoint}}>
    <div class="grid-container grid-layout__row">
        <div class="grid-x align-center grid-padding-x spacer-md">
            <div class="cell account-hero__content medium-8">
                <div class="account-hero__profile">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72.42 72.42"><circle cx="36.21" cy="36.21" r="34.71" style="fill:none;stroke:#00875a;stroke-width:3px"/><path d="M45.26,27.16a9,9,0,1,1-9-9,9,9,0,0,1,9,9Zm-4.52,0a4.53,4.53,0,1,0-4.54,4.52h0A4.56,4.56,0,0,0,40.74,27.16ZM36.21,38.47c-6,0-18.11,3-18.11,9.06v6.79H54.32V47.53C54.32,41.51,42.25,38.47,36.21,38.47ZM22.63,47.55v2.24H49.79V47.53C49.34,45.92,42.32,43,36.21,43S23.08,45.92,22.63,47.55Z" style="fill:#00875a;fill-rule:evenodd"/></svg>
                    <h2 class="account-hero__title js-account-title"></h2>
                </div>
                <div>
                    <ul class="account-hero__meta">
                        {{#each meta}}
                            <li>
                                <span class="account-hero__meta-title">{{ title }}</span>
                                <span class="account-hero__meta-text">{{ text }}</span>
                            </li>
                        {{/each}}
                    </ul>
                    <div class="account-hero__logout">
                            <a href="/api/ui/accountapi/LogoutUser" class="button-p2 button-p2--with-icon js-account-logout">{{ logout.title }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "userProfileEndpoint": "/data/user-profile.json",
  "meta": [
    {
      "title": "accountCreated",
      "text": "31st March 2020"
    },
    {
      "title": "Community level",
      "text": "Newbie"
    }
  ],
  "logout": {
    "title": "Logout",
    "text": "#"
  }
}

There are no notes for this item.