ETR Component Library

avatar-group 

<div class="avatar-group mx-auto container py-8">
    <h2 class="text-black text-3xl text-center mb-8">Contributors</h2>
    <div class="flex flex-row justify-between px-8">
        <div class="avatar--large flex flex-col items-center text-center">
            <a href="http://www.geocities.com" class="no-underline">
                  <img class="width-full round mb-4 w-48" src="https://images.unsplash.com/photo-1574158622682-e40e69881006?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;384&amp;q&#x3D;80" alt="Janet Weiss">
                <div class="text-center">
                    <p class="text-lg text-black font-bold">Janet Weiss</p>
                    <p class="text-md text-gray-darkest mt-1">Designer</p>
                    <a class="text-sm mt-3 block text-gray-darker hover:text-gray transition" href="http://www.twitter.com" target="_blank">@designer99</a>
        </div>
        </a>
    </div>
    <div class="avatar--large flex flex-col items-center text-center">
        <a href="http://www.aol.com" class="no-underline">
                  <img class="width-full round mb-4 w-48" src="https://images.unsplash.com/photo-1574158622682-e40e69881006?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;384&amp;q&#x3D;80" alt="Frank Smith">
                <div class="text-center">
                    <p class="text-lg text-black font-bold">Frank Smith</p>
                    <p class="text-md text-gray-darkest mt-1">Developer</p>
                    <a class="text-sm mt-3 block text-gray-darker hover:text-gray transition" href="http://www.instagram.com" target="_blank">@developer23</a>
    </div>
    </a>
</div>
<div class="avatar--large flex flex-col items-center text-center">
    <a href="http://www.netscape.com" class="no-underline">
                  <img class="width-full round mb-4 w-48" src="https://images.unsplash.com/photo-1574158622682-e40e69881006?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;384&amp;q&#x3D;80" alt="Kerrin McLaughlin">
                <div class="text-center">
                    <p class="text-lg text-black font-bold">Kerrin McLaughlin</p>
                    <p class="text-md text-gray-darkest mt-1">Researcher</p>
                    <a class="text-sm mt-3 block text-gray-darker hover:text-gray transition" href="http://www.yelp.com" target="_blank">@research45</a>
</div>
</a>
</div>
</div>
</div>
 
<div class="avatar-group mx-auto container py-8">
  <h2 class="text-black text-3xl text-center mb-8">{{heading}}</h2>
  <div class="flex flex-row justify-between px-8">
    {{#if avatars}}
      {{#each avatars}}
        {{> @avatar--large }}
      {{/each}}
    {{/if}}
  </div>
</div>
 
{
  "heading": "Contributors",
  "avatars": [
    {
      "name": "Janet Weiss",
      "role": "Designer",
      "portrait": "https://images.unsplash.com/photo-1574158622682-e40e69881006?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=384&q=80",
      "profile-url": "http://www.geocities.com",
      "social": {
        "handle": "designer99",
        "url": "http://www.twitter.com"
      }
    },
    {
      "name": "Frank Smith",
      "role": "Developer",
      "portrait": "https://images.unsplash.com/photo-1574158622682-e40e69881006?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=384&q=80",
      "profile-url": "http://www.aol.com",
      "social": {
        "handle": "developer23",
        "url": "http://www.instagram.com"
      }
    },
    {
      "name": "Kerrin McLaughlin",
      "role": "Researcher",
      "portrait": "https://images.unsplash.com/photo-1574158622682-e40e69881006?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=384&q=80",
      "profile-url": "http://www.netscape.com",
      "social": {
        "handle": "research45",
        "url": "http://www.yelp.com"
      }
    }
  ]
}

There are no notes for this item.