pricing-card.html 1.2 KB

12345678910111213141516171819202122232425262728293031
  1. {% assign features = "Sharing Tools|Design Tools|Private Messages|Twitter API" | split: '|' %}
  2. {% assign available-features = include.features | default: '1000' | split: '' %}
  3. <div class="card card-md">
  4. {% if include.featured-color %}
  5. {% include ui/ribbon.html color=include.featured-color bookmark=true top=true filled=true %}
  6. {% endif %}
  7. <div class="card-body text-center">
  8. <div class="text-uppercase text-secondary font-weight-medium">{{ include.category | default: 'Enterprise' }}</div>
  9. <div class="display-5 fw-bold my-3">${{ include.price | default: '79' }}</div>
  10. <ul class="list-unstyled lh-lg">
  11. <li><strong>{{ include.users | default: 10 }}</strong> Users</li>
  12. {% for feature in features %}
  13. <li>
  14. {% if available-features[forloop.index0] == '1' %}
  15. {% include ui/icon.html icon="check" class="me-1 text-success" %}
  16. {% else %}
  17. {% include ui/icon.html icon="x" class="me-1 text-danger" %}
  18. {% endif %}
  19. {{ feature }}
  20. </li>
  21. {% endfor %}
  22. </ul>
  23. <div class="text-center mt-4">
  24. <a href="#" class="btn{% if include.featured-color %} btn-{{ include.featured-color }}{% endif %} w-100">Choose plan</a>
  25. </div>
  26. </div>
  27. </div>