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 List Items

.row
  .column--quarter
    span.header--small List Item
    p.content--small.
      Base component for displaying items in a list that is extended by profile-item, project-item, table-item, message, and notification. Content contains the title/name (interchangable) and the description. Optionally include an avatar or an extra section (usually for a button or icon).
  .column--three-quarter
    label.label Code Example
    +codeExample("html").
      <div>
        <div class="list-item">
          <div class="list-item__content">
            <div class="list-item__name">Devin Frenze</div>
            <div class="list-item__description">A groovy programmer</div>
          </div>
        </div>
        <div class="list-item">
          <img class="list-item__avatar">
          <div class="list-item__content">
            <div class="list-item__name">Devin Frenze</div>
            <div class="list-item__description">A groovy programmer</div>
          </div>
        </div>
        <div class="list-item">
          <div class="list-item__content">
            <div class="list-item__title">Devin Frenze</div>
            <div class="list-item__description">A groovy programmer</div>
          </div>
          <div class="list-item__extra">
            <div class="icon">
              <div class="icon-add"/>
            </div>
          </div>
        </div>
      </div>
    label.label Result
    div
      .list-item
        .list-item__content
          .list-item__name Devin Frenze
          .list-item__description A groovy programmer
      .list-item
        img.list-item__avatar(src=avatar)
        .list-item__content
          .list-item__name Devin Frenze
          .list-item__description A groovy programmer
      .list-item
        .list-item__content
          .list-item__name Devin Frenze
          .list-item__description A groovy programmer
        .list-item__extra
          .icon
            .icon-add