moo-component-table

By default, the thead and tfoot have a gray background with bold text. By default all tbody rows have a 1px gray border-bottom as well.

There are three style class modifiers: .Table--striped, .Table--hover and .Table--condensed. • .Table--striped adds a zebra stripe to the tbody rows • .Table--hover adds a hover state for each tbody row • .Table--condensed overwrites the padding and font-size of th and td elements making each more condensed

Tip: The Table layout requires the thead and tbody elements in order to work correctly. The Table is used only with table html elements. It won’t work with any div that has been assigned the same class as the Table counterparts.

Standard

Test Two
Test Two
Test Two
Test Two
Test Two 
<table class="Table">
 <thead>
   <tr>
     <th>Test</th>
     <th>Two</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
 </tbody>
</table>

Striped

Test Two
Test Two
Test Two
Test Two
Test Two 
<table class="Table Table--striped">
 <thead>
   <tr>
     <th>Test</th>
     <th>Two</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
 </tbody>
</table>

Hover

Test Two
Test Two
Test Two
Test Two
Test Two 
<table class="Table Table--hover">
 <thead>
   <tr>
     <th>Test</th>
     <th>Two</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
 </tbody>
</table>

Condensed

Test Two
Test Two
Test Two
Test Two
Test Two 
<table class="Table Table--condensed">
 <thead>
   <tr>
     <th>Test</th>
     <th>Two</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
 </tbody>
</table>

Responsive

Guaranteed Universal Life / Life Plus AccumUL Plus/ AccumUL Answers Guaranteed Universal Life Express
Eligible Ages 18-85 0-85 18-65
Death Benefit Amounts $100,000* – $1,000,000 $25,000 – $1,000,000 and above** $50,000 – $250,000
Product Features Guaranteed Universal Life
  • Helps you guarantee a death benefit
  • Able to add features to customize plan
Guaranteed Universal Life Plus
  • Offers enhanced cash value
  • Competitive dump-in and short-pay premiums; ideal for 1035 exchanges
  • Able to add features to customize plan
  • Helps you accumulate funds for later use (retirement income, education fund) while also providing a death benefit
  • Able to add features to customize plan
  • Simplified underwriting
  • Quick issue process
  • Helps you guarantee a death benefit
  • Able to add features to customize plan
 
<table class="Table Table--responsive" id="" cellpadding="0" cellspacing="0" border="0">
  <thead>
    <tr>
      <th width="20%" align="center"></th>
      <th width="20%" align="center">Guaranteed Universal Life / Life Plus</th>
      <th width="20%" align="center">AccumUL Plus/ AccumUL Answers</th>
      <th width="20%" align="center">Guaranteed Universal Life Express</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-th="">Eligible Ages</td>
      <td data-th="Guaranteed Universal Life / Life Plus">18-85</td>
      <td data-th="AccumUL Plus/AccumUL Answers">0-85</td>
      <td data-th="Guaranteed Universal Life Express">18-65</td>
    </tr>
    <tr>
      <td data-th="">Death Benefit Amounts</td>
      <td data-th="Guaranteed Universal Life / Life Plus">$100,000<sup>*</sup> – $1,000,000</td>
      <td data-th="AccumUL Plus/AccumUL Answers">$25,000 – $1,000,000 and above**</td>
      <td data-th="Guaranteed Universal Life Express">$50,000 – $250,000</td>
    </tr>
    <tr>
      <td data-th="">Product Features</td>
      <td data-th="Guaranteed Universal Life / Life Plus">
        <strong>Guaranteed Universal Life</strong>
        <ul>
          <li>Helps you guarantee a death benefit</li>
          <li>Able to add features to customize plan</li>
        </ul>
        <strong>Guaranteed Universal Life Plus</strong>
        <ul>
          <li>Offers enhanced cash value</li>
          <li>Competitive dump-in and short-pay premiums; ideal for 1035 exchanges</li>
          <li>Able to add features to customize plan</li>
        </ul>
      </td>
      <td data-th="AccumUL Plus/AccumUL Answers">
        <ul>
          <li>Helps you accumulate funds for later use (retirement income, education fund) while also providing a death benefit</li>
          <li>Able to add features to customize plan</li>
        </ul>
      </td>
      <td data-th="Guaranteed Universal Life Express">
        <ul>
          <li>Simplified underwriting</li>
          <li>Quick issue process</li>
          <li>Helps you guarantee a death benefit</li>
          <li>Able to add features to customize plan</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>
Grid