FEC Pattern Library

Balance sheet table

Balance sheet tables are hierarchical tables used on candidate and committee profile pages. They are specifically designed using a financial table format familiar to users to give a visual sense of nested or hierarchical rows of financial total information. Integer data in the right-hand column is right-aligned for faster information scanning.

GitHub issues

<div class="container" style="padding: 2rem">
    <table class="simple-table">
        <tbody>
            <tr class="simple-table__row level--1">
                <td class="simple-table__cell">
                    <span class="term" data-term="total receipts" title="Click to define" tabindex="0">Total receipts</span>
                </td>
                <td class="simple-table__cell">$738,503,770.41</td>
            </tr>
            <tr class="simple-table__row level--2">
                <td class="simple-table__cell">Total contributions</td>
                <td class="simple-table__cell">$549,594,250.46</td>
            </tr>
            <tr class="simple-table__row level--3">
                <td class="simple-table__cell">Total individual contributions</td>
                <td class="simple-table__cell">$549,580,640.18</td>
            </tr>
            <tr class="simple-table__row level--4">
                <td class="simple-table__cell">Itemized individual contributions</td>
                <td class="simple-table__cell"><a href="#">$315,170,951.00</a></td>
            </tr>
            <tr class="simple-table__row level--4">
                <td class="simple-table__cell">Unitemized individual contributions</td>
                <td class="simple-table__cell">$234,409,690.00</td>
            </tr>
            <tr class="simple-table__row level--3">
                <td class="simple-table__cell">Party committee contributions</td>
                <td class="simple-table__cell"><a href="#">$8,610.28</a></td>
            </tr>
            <tr class="simple-table__row level--3">
                <td class="simple-table__cell">Other committee contributions</td>
                <td class="simple-table__cell"><a href="#">$0.00</a></td>
            </tr>
            <tr class="simple-table__row level--3">
                <td class="simple-table__cell">Presidential public funds</td>
                <td class="simple-table__cell">$0.00</td>
            </tr>
            <tr class="simple-table__row level--3">
                <td class="simple-table__cell">Candidate contributions</td>
                <td class="simple-table__cell"><a href="#">$5,000.00</a></td>
            </tr>
            <tr class="simple-table__row level--2">
                <td class="simple-table__cell">Transfers from other authorized committees</td>
                <td class="simple-table__cell"><a href="#">$181,700,000.00</a></td>
            </tr>
            <tr class="simple-table__row level--2">
                <td class="simple-table__cell">Total loans received</td>
                <td class="simple-table__cell">$0.00</td>
            </tr>
            <tr class="simple-table__row level--3">
                <td class="simple-table__cell">Loans made by candidate</td>
                <td class="simple-table__cell"><a href="#">$0.00</a></td>
            </tr>
            <tr class="simple-table__row level--3">
                <td class="simple-table__cell">Other loans</td>
                <td class="simple-table__cell"><a href="#">$0.00</a></td>
            </tr>
            <tr class="simple-table__row level--2">
                <td class="simple-table__cell">Total offsets to expenditures</td>
                <td class="simple-table__cell">$7,130,282.59</td>
            </tr>
            <tr class="simple-table__row level--3">
                <td class="simple-table__cell">Offsets to operating expenditures</td>
                <td class="simple-table__cell"><a href="#">$7,130,282.59</a></td>
            </tr>
            <tr class="simple-table__row level--3">
                <td class="simple-table__cell">Fundraising offsets</td>
                <td class="simple-table__cell"><a href="#">$0.00</a></td>
            </tr>
            <tr class="simple-table__row level--3">
                <td class="simple-table__cell">Legal and accounting offsets</td>
                <td class="simple-table__cell"><a href="#">$0.00</a></td>
            </tr>
            <tr class="simple-table__row level--2">
                <td class="simple-table__cell">Other receipts</td>
                <td class="simple-table__cell"><a href="#">$79,237.36</a></td>
            </tr>
        </tbody>
    </table>
</div>
 
<div class="container" style="padding: 2rem">
    <table class="simple-table">
      <tbody>
        <tr class="simple-table__row level--1">
          <td class="simple-table__cell">
            <span class="term" data-term="total receipts" title="Click to define" tabindex="0">Total receipts</span>
          </td>
          <td class="simple-table__cell">$738,503,770.41</td>
        </tr>
        <tr class="simple-table__row level--2">
          <td class="simple-table__cell">Total contributions</td>
          <td class="simple-table__cell">$549,594,250.46</td>
        </tr>
        <tr class="simple-table__row level--3">
          <td class="simple-table__cell">Total individual contributions</td>
          <td class="simple-table__cell">$549,580,640.18</td>
        </tr>
        <tr class="simple-table__row level--4">
          <td class="simple-table__cell">Itemized individual contributions</td>
          <td class="simple-table__cell"><a href="#">$315,170,951.00</a></td>
        </tr>
        <tr class="simple-table__row level--4">
          <td class="simple-table__cell">Unitemized individual contributions</td>
          <td class="simple-table__cell">$234,409,690.00</td>
        </tr>
        <tr class="simple-table__row level--3">
          <td class="simple-table__cell">Party committee contributions</td>
          <td class="simple-table__cell"><a href="#">$8,610.28</a></td>
        </tr>
        <tr class="simple-table__row level--3">
          <td class="simple-table__cell">Other committee contributions</td>
          <td class="simple-table__cell"><a href="#">$0.00</a></td>
        </tr>
        <tr class="simple-table__row level--3">
          <td class="simple-table__cell">Presidential public funds</td>
          <td class="simple-table__cell">$0.00</td>
        </tr>
        <tr class="simple-table__row level--3">
          <td class="simple-table__cell">Candidate contributions</td>
          <td class="simple-table__cell"><a href="#">$5,000.00</a></td>
        </tr>
        <tr class="simple-table__row level--2">
          <td class="simple-table__cell">Transfers from other authorized committees</td>
          <td class="simple-table__cell"><a href="#">$181,700,000.00</a></td>
        </tr>
        <tr class="simple-table__row level--2">
          <td class="simple-table__cell">Total loans received</td>
          <td class="simple-table__cell">$0.00</td>
        </tr>
        <tr class="simple-table__row level--3">
          <td class="simple-table__cell">Loans made by candidate</td>
          <td class="simple-table__cell"><a href="#">$0.00</a></td>
        </tr>
        <tr class="simple-table__row level--3">
          <td class="simple-table__cell">Other loans</td>
          <td class="simple-table__cell"><a href="#">$0.00</a></td>
        </tr>
        <tr class="simple-table__row level--2">
          <td class="simple-table__cell">Total offsets to expenditures</td>
          <td class="simple-table__cell">$7,130,282.59</td>
        </tr>
        <tr class="simple-table__row level--3">
          <td class="simple-table__cell">Offsets to operating expenditures</td>
          <td class="simple-table__cell"><a href="#">$7,130,282.59</a></td>
        </tr>
        <tr class="simple-table__row level--3">
          <td class="simple-table__cell">Fundraising offsets</td>
          <td class="simple-table__cell"><a href="#">$0.00</a></td>
        </tr>
        <tr class="simple-table__row level--3">
          <td class="simple-table__cell">Legal and accounting offsets</td>
          <td class="simple-table__cell"><a href="#">$0.00</a></td>
        </tr>
        <tr class="simple-table__row level--2">
          <td class="simple-table__cell">Other receipts</td>
          <td class="simple-table__cell"><a href="#">$79,237.36</a></td>
        </tr>
      </tbody>
    </table>
</div>
 
/* No context defined. */
  • Handle: @balance-sheet-table
  • Preview:
  • Filesystem Path: components/02-components/tables/05-balance-sheet-table/balance-sheet-table.html