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 Projects

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

  .column--three-quarter
    label.label Code Example
    +codeExample("html").
      <div class="project-item">
        <div class="project-item__content">
          <div class="project-item__title">
            New Project
          </div>
          <div class="project-item__owner">
            Devin Frenze
          </div>
        </div>
        <div class="project-item__extra">
          <div class="icon">
            <div class="icon-add">
          </div>
        </div>
      </div>
    label.label Result
    .project-item
      .project-item__content
        .project-item__title New Project
        .project-item__owner Devin Frenze
      .project_item__extra
        .icon
          .icon-add
br
.row
  .column--quarter
    span.header--small Project Card
    p.content--small.
      Project cards are used when viewing projects in a card list.

  .column--three-quarter
    label.label Code Example
    +codeExample("html").
      <div class="project-card">
        <div class="project-card__header">
          <img class="project-card__avatar" src="..." />
          <div>
            <div class="project-card__title">
              New Project
            </div>
            <div class="project-card__owner">
              Devin Frenze
            </div>
          </div>
        </div>
        <div class="project-card__preview">
          <img src="...">
          <div>This is a text piece</div>
          <img src="...">
        </div>
        <div class="project-card__extra">
          <div class="icon">
            <div class="icon-add">
          </div>
        </div>
      </div>
    label.label Result
    .project-card
      .project-card__header
        img.project-card__avatar(src=avatar)
        div
          .project-card__title New Project
          .project-card__owner Devin Frenze
      .project-card__preview
        img(src=avatar)
        div This is a text piece.
        img(src=avatar)
      .project-card__extra
        .icon
          .icon-add