Foundation price list


Price list can be used to display enterprise products:

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>价格表</h2>
  <ul class="pricing-table">
    <li class="title">Basic</li>
    <li class="price">.99</li>
    <li class="description">Great for small business</li>
    <li class="bullet-item">24/7 Support</li>
    <li class="bullet-item">15GB Storage</li>
    <li class="bullet-item">1GB Bandwidth</li>
    <li class="cta-button"><a class="a button" href="#">Sign Up</a></li>
  </ul>
</div>

</body>
</html>

Run Instance»

Click "Run Instance" "Button to view online examples

Instance analysis

  • ##ul.pricing-table - Define price list

  • li.title - Define the product title (black background)

  • ##li.price

    - Define the price (gray background font Large items)

  • li.description

    - Define product description (if required)

    • ##li. bullet-item
  • - Define product features

    • li.ca-button
  • - Button text (such as "Buy", "Join", "Sign Up" , etc.)

    • Note:
The table will fill 100% of the width of the container, and all items will have borders and be centered.

Price List Grid

The following example shows the prices of three enterprise products (the three items are equally divided in width):

Example

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>网格中的价格表</h2>
  <div class="medium-4 columns">
    <ul class="pricing-table">
      <li class="title">Basic</li>
      <li class="price">.99</li>
      <li class="description">Great for small business</li>
      <li class="bullet-item">24/7 Support</li>
      <li class="bullet-item">15GB Storage</li>
      <li class="bullet-item">1GB Bandwidth</li>
      <li class="cta-button"><a class="a button" href="#">Sign Up</a></li>
    </ul>
  </div>
  <div class="medium-4 columns">
    <ul class="pricing-table">
      <li class="title">Pro</li>
      <li class="price">.99</li>
      <li class="description">For the Average Joe</li>
      <li class="bullet-item">24/7 Support</li>
      <li class="bullet-item">25GB Storage</li>
      <li class="bullet-item">2GB Bandwidth</li>
      <li class="cta-button"><a class="a button" href="#">Sign Up</a></li>
    </ul>
  </div>
  <div class="medium-4 columns">
    <ul class="pricing-table">
      <li class="title">Premium</li>
      <li class="price">.99</li>
      <li class="description">When only the best is an option</li>
      <li class="bullet-item">24/7 Support</li>
      <li class="bullet-item">Unlimited Storage</li>
      <li class="bullet-item">Unlimited Bandwidth</li>
      <li class="cta-button"><a class="a button" href="#">Sign Up</a></li>
    </ul>
  </div>
</div>
  
</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance
←
→