include ./helpers

- var avatar = "https://storage.googleapis.com/media.table.co/c33369b2-db56-40d2-a38b-1ad5ee89cc83_RC_140x140.jpeg?GoogleAccessId=560341208563-u1ti014a2f6lfp2id4v2h976d2ci3ce1@developer.gserviceaccount.com&Expires=17203901351&Signature=Ut6yda4xLF5kXmnmtfCNKrrqGM1mw5tDD8aCt0NfvwIkiwuNElYBu2OArdxe5nfw%2Fp0dRcWkbgmjglKIU5yB78c%2BvwgfS171GAxPO%2FvnZ%2FRdGhvui2KiCPKovugsQ6TV7P5um%2BG7TK0CJlw5pf35yQjXpX3lgxBHpkyk9RjqhPuMnMu0oIHbYsI1QjKCQH83aZrOZIAEGYXivOsbFcuASN1aegpsP%2B7D6t3liLhDb7VD36gEwqGZSO18p60d5IdAx3kWVSo246DOp5kphPoO0NAiww%2BvcE7SjS4A8RfUZDVOF9B3E7vFmpSgfgVhFoo5Tjn%2BRJX%2BKDo7Nzcy%2FeG%2BwA%3D%3D"

h1.example__header Avatars

.row
  .column--quarter
    span.header--small Avatar
    p.content--small.
      Standard way of displaying user's avatar. Comes in three sizes.
  .column--three-quarter
    label.label Code Example
    +codeExample("html").
      <div class="row" style="justify-content:space-around; align-items:center;">
        <div class="box-wrap background--dark">
          <div class="avatar--xs" style={{ backgroundImage: "..."}}/>
        </div>
        <div class="box-wrap background--dark">
          <div class="avatar--sm" style={{ backgroundImage: "..."}}/>
        </div>
        <div class="box-wrap background--dark">
          <div class="avatar" style={{ backgroundImage: "..."}}/>
        </div>
        <div class="box-wrap background--dark">
          <div class="avatar--lg" style={{ backgroundImage: "..."}}/>
        </div>
      </div>
      <div class="row" style="justify-content:space-around; align-items:center;">
        <div class="box-wrap background--dark">
          <div class="avatar--xs"/>
        </div>
        <div class="box-wrap background--dark">
          <div class="avatar--sm"/>
        </div>
        <div class="box-wrap background--dark">
          <div class="avatar"/>
        </div>
        <div class="box-wrap background--dark">
          <div class="avatar--lg"/>
        </div>
      </div>
    label.label Result
    .row(style="justify-content:space-around;align-items:center;")
      .box-wrap.background--dark
        .avatar--xs(style="background-image:url("+avatar+")")
      .box-wrap.background--dark
        .avatar--sm(style="background-image:url("+avatar+")")
      .box.background--dark
        .avatar(style="background-image:url("+avatar+")")
      .box-wrap.background--dark
        .avatar--lg(style="background-image:url("+avatar+")")
    .row(style="justify-content:space-around;align-items:center;")
      .box-wrap.background--dark
        .avatar--xs
      .box-wrap.background--dark
        .avatar--sm
      .box.background--dark
        .avatar
      .box-wrap.background--dark
        .avatar--lg