# Foundation 價格表 價格表可用于展示企業產品: ### 實例 ``` <ul class="pricing-table"> ? <li class="title">Basic</li> ? <li class="price">$19.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="button" href="#">Buy</a></li> </ul> ``` ### 實例解析 * `ul.pricing-table` - 定義價格表 * `li.title` - 定義產品標題 (黑色背景) * `li.price` - 定義價格 (灰色背景字體大個項) * `li.description` - 定義產品描述 (如果需要) * `li.bullet-item` - 定義產品特點 * `li.ca-button` - 按鈕文本 (如 "Buy", "Join", "Sign Up", 等) **注意:** 表格會 100% 填充容器的寬度，所有的項都有邊框且是居中的。 ## 價格表網格 以下實例顯示了三個企業產品的價格（三項是均等劃分寬度的）： ### 實例 ``` <div class="row"> ? <div class="medium-4 columns"> ??? <ul class="pricing-table"> ????? <li class="title">Basic</li> ????? ... ??? </ul> ? </div> ? <div class="medium-4 columns"> ??? <ul class="pricing-table"> ????? <li class="title">Pro</li> ????? ... ??? </ul> ? </div> ? <div class="medium-4 columns"> ??? <ul class="pricing-table"> ????? <li class="title">Premium</li> ????? ... ??? </ul> ? </div> </div> ```