Pricing

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.

Description

It's a section to display pricing tabs. This section is based on a tiles pattern.

Pricing switcher

The pricing switcher is an add-on for the pricing section, based on the switch element. It can be useful for toggling between monthly/annual prices.

Prior to v2.4.1

In the HTML template you need to set data-pricing-monthly and data-pricing-annually attributes and add the .pricing-switchable class on every element you want to change when switching the pricing toggle.

In React and Vue, you can simply use a ternary operator to decide what to display on the toggle switch. Take a look at the templates to see how it works.

Since v2.4.1

In the HTML template you need to pass data via a data-price-output attribute to the .pricing-item-price element:

<div class="pricing-item-price" data-price-output='{
"0": ["$", "35", "monthly"],
"1": ["$", "27", "annually"]
}'>

0 stands for "unchecked" and 1 for "checked".

  • The dollar sign will be outputted in the .pricing-item-price-currency element

  • The amount will be outputted in the .pricing-item-price-amount element

  • The period will be outputted in the .pricing-item-price-after element

In React and Vue, you will need to set a priceOutput state / data. Take a look at the templates to see how it works.

Pricing slider

The pricing slider is an add-on for the pricing section, introduced in v2.4.1.

In the HTML template you need to pass input and output data.

Input data is passed via a data-price-input attribute to the <input type="range" /> element:

<input type="range" data-price-input='{
"0": "1,000",
"1": "1,250",
"2": "1,500",
"3": "2,000",
"4": "2,500",
"5": "3,500",
"6": "6,000",
"7": "15,000",
"8": "50,000"
}'>

Output data looks a little different for structure, since each value is not a string, but an array of strings.

<div class="pricing-item-price" data-price-output='{
"0": ["", "Free", ""],
"1": ["$", "13", "/m"],
"2": ["$", "17", "/m"],
"3": ["$", "21", "/m"],
"4": ["$", "25", "/m"],
"5": ["$", "42", "/m"],
"6": ["$", "58", "/m"],
"7": ["$", "117", "/m"],
"8": ["$", "208", "/m"]
}'>
  • The dollar sign will be outputted in the .pricing-item-price-currency element

  • The amount will be outputted in the .pricing-item-price-amount element

  • The period will be outputted in the .pricing-item-price-after element

In React and Vue, you will need to set priceInput and priceOutput states / datas. Take a look at the templates to see how it works.

Component files

React
Vue
React

👉src/components/sections/Pricing.js

Vue

👉src/components/sections/Pricing.vue

Theming

Style is defined into 3 files:

📋 Core file

src/assets/scss/core/sections/_pricing.scss

👆🚫 Don't edit this file!

📋 Settings file

src/assets/scss/settings/sections/_pricing.scss

👆Use this to adjust Sass variables

📋 Theme file

src/assets/scss/theme/sections/_pricing.scss