Table

HTML

A table displays a collections of data grouped into rows. Just a bunch of good old tables.

Basic

Title Impressions Clicks Spend Type
Shopify sales 4,230 520 $78 Simple
HTML
    <table class="table">
  <thead>
    <tr>
      <th>Title</th>
      <th>Impressions</th>
      <th>Clicks</th>
      <th>Spend</th>
      <th>Type</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Shopify sales</td>
      <td>4,230</td>
      <td>520</td>
      <td>$78</td>
      <td>Simple</td>
    </tr>
  </tbody>
</table>
  

With a bottom border

Title Impressions Clicks Spend Type
Shopify sales 4,230 520 $78 Simple
Shopify sales 4,230 520 $78 Simple
HTML
    <table class="table table--border-bottom">
  <thead>
    <tr>
      <th>Title</th>
      <th>Impressions</th>
      <th>Clicks</th>
      <th>Spend</th>
      <th>Type</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Shopify sales</td>
      <td>4,230</td>
      <td>520</td>
      <td>$78</td>
      <td>Simple</td>
    </tr>
    <tr>
      <td>Shopify sales</td>
      <td>4,230</td>
      <td>520</td>
      <td>$78</td>
      <td>Simple</td>
    </tr>
  </tbody>
</table>
  

Fixed

Distribute columns evenly

Budget Spent Budget Date added
$30,000 $768 Wed, May 9th 2018
$10,000 $10,000 Tue, May 8th 2018
$2,000 $2,000 Mon, May 7th 2018
HTML
    <table class="table table--fixed">
  <thead>
    <tr>
      <th>Budget</th>
      <th>Spent Budget</th>
      <th>Date added</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>$30,000</td>
      <td>$768</td>
      <td>Wed, May 9th 2018</td>
    </tr>
    <tr>
      <td>$10,000</td>
      <td>$10,000</td>
      <td>Tue, May 8th 2018</td>
    </tr>
    <tr>
      <td>$2,000</td>
      <td>$2,000</td>
      <td>Mon, May 7th 2018</td>
    </tr>
  </tbody>
</table>
  

Compact

Budget Spent Budget Date added
$30,000 $768 Wed, May 9th 2018
$10,000 $10,000 Tue, May 8th 2018
$2,000 $2,000 Mon, May 7th 2018
HTML
    <table class="table table--fixed table--compact table--border-bottom">
  <thead>
    <tr>
      <th>Budget</th>
      <th>Spent Budget</th>
      <th>Date added</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>$30,000</td>
      <td>$768</td>
      <td>Wed, May 9th 2018</td>
    </tr>
    <tr>
      <td>$10,000</td>
      <td>$10,000</td>
      <td>Tue, May 8th 2018</td>
    </tr>
    <tr>
      <td>$2,000</td>
      <td>$2,000</td>
      <td>Mon, May 7th 2018</td>
    </tr>
  </tbody>
</table>
  

Celled

Budget Spent Budget Date added
$30,000 $768 Wed, May 9th 2018
$10,000 $10,000 Tue, May 8th 2018
$2,000 $2,000 Mon, May 7th 2018
HTML
    <table class="table table--celled">
  <thead>
    <tr>
      <th>Budget</th>
      <th>Spent Budget</th>
      <th>Date added</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>$30,000</td>
      <td>$768</td>
      <td>Wed, May 9th 2018</td>
    </tr>
    <tr>
      <td>$10,000</td>
      <td>$10,000</td>
      <td>Tue, May 8th 2018</td>
    </tr>
    <tr>
      <td>$2,000</td>
      <td>$2,000</td>
      <td>Mon, May 7th 2018</td>
    </tr>
  </tbody>
</table>
  

Definition

Plan Fomo Essential Fomo Plus current plan Fomo Advanced
Price $39 / month $79 / month $199 / month
Notifications 50,000 200,000 3,000,000
Website domains unlimited unlimited unlimited
Custom page rules
Email support
HTML
    <table class="table table--fixed table--compact table--definition table--border-bottom">
  <thead>
    <th>Plan</th>
    <th>Fomo Essential</th>
    <th>
      Fomo Plus <span class="label label--green label--small">current plan</span>
    </th>
    <th>Fomo Advanced</th>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>
        <button type="button" class="button button--basic button--small">Downgrade to Essential</button>
      </td>
      <td>
        <button type="button" class="button button--basic button--small">Cancel subscription</button>
      </td>
      <td>
        <button type="button" class="button button--small">Upgrade to Advanced</button>
      </td>
    </tr>
    <tr>
      <td>Price</td>
      <td>$39 / month</td>
      <td>$79 / month</td>
      <td>$199 / month</td>
    </tr>
    <tr>
      <td>Notifications</td>
      <td>50,000</td>
      <td>200,000</td>
      <td>3,000,000</td>
    </tr>
    <tr>
      <td>Website domains</td>
      <td>unlimited</td>
      <td>unlimited</td>
      <td>unlimited</td>
    </tr>
    <tr>
      <td>Custom page rules</td>
      <td><span class="icon-tick"></span></td>
      <td><span class="icon-tick"></span></td>
      <td><span class="icon-tick"></span></td>
    </tr>
    <tr>
      <td>Email support</td>
      <td><span class="icon-tick"></span></td>
      <td><span class="icon-tick"></span></td>
      <td><span class="icon-tick"></span></td>
    </tr>
  </tbody>
</table>
  

In a card

Budgets

Budget Spent Budget Date added
$30,000 $768 Wed, May 9th 2018
$10,000 $10,000 Tue, May 8th 2018
$2,000 $2,000 Mon, May 7th 2018
HTML
    <div class="card card--full">
  <div class="card__header">
    <h3 class="card__title">Budgets</h3>
  </div>

  <div class="card__body">
    <table class="table table--fixed">
      <thead>
      <tr>
        <th>Budget</th>
        <th>Spent Budget</th>
        <th>Date added</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>$30,000</td>
        <td>$768</td>
        <td>Wed, May 9th 2018</td>
      </tr>
      <tr>
        <td>$10,000</td>
        <td>$10,000</td>
        <td>Tue, May 8th 2018</td>
      </tr>
      <tr>
        <td>$2,000</td>
        <td>$2,000</td>
        <td>Mon, May 7th 2018</td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
  

Usage

Attribute Description Possible values Type Required Default
bottom-border Set with .table--border-bottom class border-bottom String - -
fixed Set with .table--fixed class to distribute columns evenly fixed String - -
compact Set with .table--compact class compact String - -
definition Set with .table--defintion class to add more spacing to th tags definition String - -