Pricing Tables

Elementric components - just copy the HTML code of an element and paste it into your code (after you read the installation guide).

Examples

Style 1

        
Copy
        
  <div class="pricing-table-1">
    <p class="pricing-table-title">Standard</p>
    <p class="pricing-table-price"><strong>$10</strong>/month</p>

    <ul>
      <li><i class="fas fa-check"></i> Standard Feature</li>
      <li><i class="fas fa-check"></i> Standard Feature</li>
      <li><i class="fas fa-check"></i> Standard Feature</li>
    </ul>

    <button type="button" class="button-standard button-xlg full-width">Get Started <i class="fas fa-arrow-right fa-sm"></i></button>
  </div>
        
      

Style 2

        
Copy
        
  <div class="pricing-table-2">
    <p class="pricing-table-title">Get started now with Standard plan</p>

    <p class="pricing-table-price"><strong>$10</strong>/year</p>

    <button type="button" class="button-link">Get Started <i class="fas fa-arrow-right fa-sm"></i></button>
  </div>
        
      

Style 3

        
Copy
        
  <div class="pricing-table-3">
    <i class="fab fa-buffer"></i>
    <p class="pricing-table-title">Premium</p>

    <p class="pricing-table-price"><strong>$20</strong>/month</p>
    <p class="pricing-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <ul>
      <li><i class="fas fa-check"></i> Premium Feature</li>
      <li><i class="fas fa-check"></i> Premium Feature</li>
      <li><i class="fas fa-check"></i> Premium Feature</li>
      <li><i class="fas fa-check"></i> Premium Feature</li>
      <li><i class="fas fa-check"></i> Premium Feature</li>
    </ul>

    <button type="button" class="button-gradient-standard button-xlg full-width">Choose Plan</button>
  </div>