MUSIC ON

Tables

Pricing Tables

If you’re making a rockin’ marketing site for a subscription-based product you are likely in need of a pricing table. You can create one with Foundation by creating a class="pricing-table", using the grid to position and size. Inside you can include: class="title", class="price", class="description", class="bullet-item", class="blue", class="violet", class="pink", class="currency1", class="bignumber1", class="smallnumber1", class="coma1", class="currency2", class="bignumber2", class="smallnumber2", class="cta-button" to create the table, here’s an example:

    • Standard
    • Content…
    • 1 Drink
    • 1/2 price appetizers
    • 2 Persons
    • $49.99 / mo.
    • VIP
    • Content…
    • 1 Drink
    • 1/2 price appetizers
    • 2 Persons
    • $49.99
      per Month
    • Club
    • Content…
    • 1 Drink
    • 1/2 price appetizers
    • 2 Persons
    • $49.99
  • 
    
    <ul class="pricing-table">
    
      <li class="title violet">Standard</li>
    
      <li class="description">Content...</li>
    
      <li class="bullet-item">1 Drink</li>
    
      <li class="bullet-item">1/2 price appetizers</li>
    
      <li class="bullet-item">2 Persons</li>
    
      <li class="price"><span class="currency2">$</span><span class="bignumber2">49</span><span class="smallnumber2">.99</span></li>
    
      <li class="cta-button"><a class="button" href="#">Buy it Now</a></li>
    
    </ul>
    
    

Tables

Okay, they’re not the sexiest things ever, but tables get the job done (for tabular data).

  • Table Header Table Header Table Header Table Header
    Content This is longer content Content Content
    Content This is longer content Content Content
    Content This is longer content Content Content
    Content This is longer content Content Content
  • 
    
    <table class="twelve">
    
      <thead>
    
        <tr>
    
          <th>Table Header</th>
    
          <th>Table Header</th>
    
          <th>Table Header</th>
    
          <th>Table Header</th>
    
        </tr>
    
      </thead>
    
      <tbody>
    
        <tr>
    
          <td>Content</td>
    
          <td>This is longer content</td>
    
          <td>Content</td>
    
          <td>Content</td>
    
        </tr>
    
        <tr>
    
          <td>Content</td>
    
          <td>This is longer content</td>
    
          <td>Content</td>
    
          <td>Content</td>
    
        </tr>
    
        <tr>
    
          <td>Content</td>
    
          <td>This is longer content</td>
    
          <td>Content</td>
    
          <td>Content</td>
    
        </tr>
    
        <tr>
    
          <td>Content</td>
    
          <td>This is longer content</td>
    
          <td>Content</td>
    
          <td>Content</td>
    
        </tr>
    
      </tbody>
    
    </table>
    
    

Our Partners