Tables | Crossroads Digital Design Kit

UI Components / Tables

Confirm:
Amount: $100.00
From: joe@dirt.com
change
Frequency: One Time
Payment: Account ending in 4242
change
<div class="table-contrast-bg">
  <div class="component-header">Confirm:</div>

  <table class="table">
    <tbody>
      <tr>
        <td class="text-uppercase font-size-smaller">
          <a href="#">Amount:</a>
        </td>

        <td class="font-size-large text-right">$100.00</td>
      </tr>

      <tr>
        <td class="text-uppercase font-size-smaller">
          <a href="#">From:</a>
        </td>

        <td class="text-right font-size-small">joe@dirt.com<br>
          <a class="font-size-smaller" href="#">change</a>
        </td>
      </tr>

      <tr>
        <td class="text-uppercase font-size-smaller">
          <a href="#">Frequency:</a>
        </td>

        <td class="text-right font-size-small">One Time</td>
      </tr>

      <tr>
        <td class="text-uppercase font-size-smaller">
          <a href="#">Payment:</a>
        </td>

        <td class="text-right font-size-small">Account ending in 4242
          <br>
          <a class="font-size-smaller" href="#">change</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>
Live Stream Schedule
Superbowl of Preaching
Saturday 1:00 PM EST
3:00 PM EST
5:00 PM EST
7:00 PM EST
9:00 PM EST
Sunday 8:30 AM EST
10:30 AM EST
12:30 PM EST
2:00 PM EST
4:00 PM EST
<div class="table-contrast-bg">
  <div class="component-header">Live Stream Schedule</div>
  <div class="table-tagline">Superbowl of Preaching</div>

  <table class="table schedule-table">
    <tbody>
      <tr class="new-day">
        <td>Saturday</td>
        <td>1:00 PM EST</td>
      </tr>
      <tr>
        <td></td>
        <td>3:00 PM EST</td>
      </tr>
      <tr>
        <td></td>
        <td>5:00 PM EST</td>
      </tr>
      <tr>
        <td></td>
        <td>7:00 PM EST</td>
      </tr>
      <tr>
        <td></td>
        <td>9:00 PM EST</td>
      </tr>
      <tr class="new-day">
        <td>Sunday</td>
        <td>8:30 AM EST</td>
      </tr>
      <tr>
        <td></td>
        <td>10:30 AM EST</td>
      </tr>
      <tr>
        <td></td>
        <td>12:30 PM EST</td>
      </tr>
      <tr>
        <td></td>
        <td>2:00 PM EST</td>
      </tr>
      <tr>
        <td></td>
        <td>4:00 PM EST</td>
      </tr>
    </tbody>
  </table>
</div>