Tables

Different table styling

13-1 Standard Tables

Name Description
client_id Issued when you created your application
redirect_uri URL to redirect back to see below
client_id Issued when you created your application
redirect_uri URL to redirect back to see below

Bordered table that's inset .table--bordered

Name Description
client_id Issued when you created your application
redirect_uri URL to redirect back to see below
client_id Issued when you created your application
redirect_uri URL to redirect back to see below

Striped tabled, every other colored .table--striped

Name Description
client_id Issued when you created your application
redirect_uri URL to redirect back to see below
client_id Issued when you created your application
redirect_uri URL to redirect back to see below
<table class="[modifier class]">
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>client_id</td>
    <td>Issued when you created your application</td>
  </tr>
  <tr>
    <td>redirect_uri</td>
    <td>URL to redirect back to see below</td>
  </tr>
    <tr>
    <td>client_id</td>
    <td>Issued when you created your application</td>
  </tr>
  <tr>
    <td>redirect_uri</td>
    <td>URL to redirect back to see below</td>
  </tr>
</table>

13-2 Expandable Tables

These assume there will be a hidden row, every other row. To open them, just add the class "row--expanded" to them.

User ID First Name Middle Name Last Name Status
1234 Foo Bar Baz Pending
1234 Boo Far Faz Accepted
1234 Foo Bar Baz Pending
1234 Boo Far Faz Accepted
<table class="table--expandable">
  <tr>
    <th>User ID</th>
    <th>First Name</th>
    <th>Middle Name</th>
    <th>Last Name</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>1234</td>
    <td>Foo</td>
    <td>Bar</td>
    <td>Baz</td>
    <td>Pending</td>
  </tr>
  <tr>
    <td colspan="5">
    </td>
  </tr>
  <tr>
    <td>1234</td>
    <td>Boo</td>
    <td>Far</td>
    <td>Faz</td>
    <td>Accepted</td>
  </tr>
  <tr>
    <td colspan="5">
    </td>
  </tr>
  <tr>
    <td>1234</td>
    <td>Foo</td>
    <td>Bar</td>
    <td>Baz</td>
    <td>Pending</td>
  </tr>
  <tr>
    <td colspan="5">
    </td>
  </tr>
  <tr>
    <td>1234</td>
    <td>Boo</td>
    <td>Far</td>
    <td>Faz</td>
    <td>Accepted</td>
  </tr>
  <tr>
    <td colspan="5">
    </td>
  </tr>
</table>