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"

- var coverImage = "https://storage.googleapis.com/media.table.co/bda3ba57-cf00-48f3-96a6-40ba729743cb.jpeg?GoogleAccessId=560341208563-u1ti014a2f6lfp2id4v2h976d2ci3ce1@developer.gserviceaccount.com&Expires=17198942202&Signature=X1LSXffld1QLnyR%2Bh9Dw4zcQ1IPVewJpi5Vfn0b4p7kap0yC0oF%2BqiD1%2FiYLdR5nEq2%2FEbWlN5u7mJlxewgbV77mf3SBe7u6N16SFExUe%2BY%2FDZNSF652fueKATKW5NB9v%2B%2Fw7EjWCRaX4ur0uW7QUfebISASrmX174k7Cd%2BRmYJvqURBpgl6MHBcMKm%2BOgtjDzcN3xuF8Nih8iIIoMnvGiY%2BXPw%2FiFlrpaAkPk7vZMD8e3WAYYWHdQI8bFBZbR62nPI%2Bm93sd652r79kgoRYo1pwoGhQN87CGiTjJSzFg0vBXPowNuJy4dUTo%2BxviOl3hXz9yBqPs6y1vuG7ZX8nlQ%3D%3D"

h1.example__header Profiles

- // Profile list item section
//
  br
  .row
    .column--quarter
      span.header--small Profile list item
      p.content--small.
        Profile list items should be used when you have a list of profiles.

    .column--three-quarter
      label.label Code Example
      +codeExample("html").
        <div class="profile-item">
          <img class="profile-item__avatar" src="..." />
          <div class="profile-item__content">
            <span class="profile-item__name">
              Connor McCutcheon
            </span>
            <span class="profile-item__description">
              My description...
            </span>
          </div>
        </div>
        ...Repeat
      label.label Result
      .profile-item
        img.profile-item__avatar(src=avatar)
        .profile-item__content
          .profile-item__name Connor McCutcheon
          .profile-item__description I love to write code. This is now a very long description about me and is going to take up more than a line
      .profile-item
        img.profile-item__avatar(src="https://storage.googleapis.com/media.table.co/2a662f39-d211-4306-bb94-b9ca32af2096.jpeg?GoogleAccessId=560341208563-u1ti014a2f6lfp2id4v2h976d2ci3ce1@developer.gserviceaccount.com&Expires=17201618823&Signature=VClQjNPv98NBfK0YmIouoY8tno%2B8dvDtgKXlMZ0VMicCRUwqxj3AosT9gXxNszpUUd8EgLD8MROYbbCuP17Q9nmgWG99LbRTCVX1KVYFEi%2BVgeopLXaaCcgT2GXWxBlF2%2BSuUajhoZUkzUUk0Snoz%2FtRH3b01BwzQ9IhdKDAJ%2F2n1%2FrASsEJ%2BFJYbOvd5%2FgztKkdhfwLBiJMKMv265qnZh3ADiOtXXxh%2BmXr0E%2BY0eeNZZb7C%2FJ7z%2F10FowuJooRsC9B%2FD8j66biEkTSjp1GrxQUg%2BX7LTUH9i8kGeLSmds9fLR1QmzYvYGcoI95FPgOm8qiiGFClWAEecaUUFdQkQ%3D%3D")
        .profile-item__content
          span.profile-item__name Dave Scott McCarthy
          span.profile-item__description User Experience designer, Photoshop Jedi, and the Lead Designer at Table.
- // Profile card section
//
  br
  .row
    .column--quarter
      span.header--small Profile Card
      p.content--small.
        Profile cards are used when viewing profiles in a card list.

    .column--three-quarter
      label.label Code Example
      +codeExample("html").
        <div class="profile-card">
          <div class="profile-card__cover-image" style="background-image:url(...)">
            <img src="..." class="profile-card__avatar" />
            <div class="profile-card__name">
              Connor McCutcheon
            </div>
          </div>
          <div class="profile-card__location">
            Pleasanton, Ca
          </div>
          <p class="profile-card__description">
            This is my description
          </p>
        </div>
      label.label Result
      .profile-card
        .profile-card__cover-image(style="background-image:url(#{coverImage})")
          img.profile-card__avatar(src=avatar)
          .profile-card__name Connor McCutcheon
        .profile-card__location Pleasanton
        p.profile-card__description I love to write code. This is now a very long description about me and is going to take up more than a line