include ./helpers

h1.example__header Tables

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

    .column--three-quarter
      label.label Code Example
      +codeExample("html").
        <div class="table-item">
          <div class="table-item__content">
            <div class="table-item__title">
              New Table
            </div>
            <div class="table-item__update">
              27 minutes ago
            </div>
          </div>
          <div class="table-item__extra">
            <div class="icon-gear"/>
          </div>
        </div>
      label.label Result
      .table-item
        .table-item__content
          .table-item__title New Table
          .table-item__updated 27 minutes ago
        .table_item__extra
          .icon-gear
//
  br
  .row
    .column--quarter
      span.header--small Table Card
      p.content--small.
        Table cards are used when viewing tables in a card list.

    .column--three-quarter
      label.label Code Example
      +codeExample("html").
        <div class="table-card">
          <div class="table-card__title">
            New Table
          </div>
          <div class="table-card__updated">
            27 minutes ago
          </div>
          <div class="table-card__description">
            With Connor McCutcheon, Devin Frenze, and Haley Thurston
          </div>
          <div class="table-card__extra">
            <div class="icon-gear"/>
          </div>
        </div>
      label.label Result
      .table-card
        .table-card__title New Table
        .table-card__updated 27 minutes ago
        .table-card__description With Connor McCutcheon, Devin Frenze, and Haley Thurston
        .table-card__extra
          .icon-gear