article#table.u-mt-10
  h2.u-size-xl # Table
  p.u-mt-2
   | Tables are great for displaying tabular data.
  .u-my-10
    table.c-table
      thead.c-table__head
        tr.c-table__row.c-table__row--heading
          th.c-table__col First Name
          th.c-table__col Last Name
          th.c-table__col Sex
      tbody.c-table__body
        tr.c-table__row
          td.c-table__col John
          td.c-table__col Doe
          td.c-table__col Male
        tr.c-table__row
          td.c-table__col Jane
          td.c-table__col Doe
          td.c-table__col Female
  script.language-markup.u-mt-4(type='text/plain').
    <table class="c-table"> 
      <thead class="c-table__head">
        <tr class="c-table__row c-table__row--heading">
          <th class="c-table__col">First Name</th>
          <th class="c-table__col">Last Name</th>
          <th class="c-table__col">Sex</th>
        </tr>
      </thead>
      <tbody class="c-table__body">
        <tr class="c-table__row">
          <td class="c-table__col">John</td>
          <td class="c-table__col">Doe</td>
          <td class="c-table__col">Male</td>
        </tr>
        <tr class="c-table__row">
          <td class="c-table__col">Jane</td>
          <td class="c-table__col">Doe</td>
          <td class="c-table__col">Female</td>
        </tr>
      </tbody>
    </table>
  h3.u-size-lg.u-mt-6 Table Striped
  p.u-mt-2
    | Applying 
    code.e-code .c-table--striped
    |  class modifier will make a striped rows in your table.
  .u-my-10
    table.c-table.c-table--striped
      thead.c-table__head
        tr.c-table__row.c-table__row--heading
          th.c-table__col First Name
          th.c-table__col Last Name
          th.c-table__col Sex
      tbody.c-table__body
        tr.c-table__row
          td.c-table__col John
          td.c-table__col Doe
          td.c-table__col Male
        tr.c-table__row
          td.c-table__col Jane
          td.c-table__col Doe
          td.c-table__col Female
        tr.c-table__row
          td.c-table__col Mike
          td.c-table__col Doe
          td.c-table__col Male
  script.language-markup.u-mt-4(type='text/plain').
    <table class="c-table c-table--striped"> 
      <thead class="c-table__head">
        <tr class="c-table__row c-table__row--heading">
          <th class="c-table__col">First Name</th>
          <th class="c-table__col">Last Name</th>
          <th class="c-table__col">Sex</th>
        </tr>
      </thead>
      <tbody class="c-table__body">
        <tr class="c-table__row">
          <td class="c-table__col">John</td>
          <td class="c-table__col">Doe</td>
          <td class="c-table__col">Male</td>
        </tr>
        <tr class="c-table__row">
          <td class="c-table__col">Jane</td>
          <td class="c-table__col">Doe</td>
          <td class="c-table__col">Female</td>
        </tr>
        <tr class="c-table__row">
          <td class="c-table__col">Mike</td>
          <td class="c-table__col">Doe</td>
          <td class="c-table__col">Male</td>
        </tr>
      </tbody>
    </table>