Tabella prezzi
Visualizzazione piani tariffari con toggle mensile/annuale. Disponibile come schede affiancate o tabella comparativa delle funzionalità con evidenziazione del piano popolare.
Schede
Schede tariffarie affiancate con elenchi di funzionalità
_pricing_table.html.erb
███
███████ █████ █████████ █ █████ █████ █████████
██████
███ ██████ █████████████████████████████████ ██████ █
█ █████ ██████████ ██████ ████ █████████████ █████ ████████████ ████ █████████████ █████████ ███ ██████████ ██████ ██████████ ██████████ ████ █████████ █████████ ███ ██
█ █████ ██████ ██████ █████ █████████████ ██████ ████████████ ████ ███████ █████████ ███████████ ██████████ █████████ ██████████ ██████████ ████ █████████ █████████ ████ ████████ ████ ██
█ █████ █████████████ ██████ █████ █████████████ ██████ ████████████ ████ █████ ██████ █████████ ████████ ███████████ █████ ██████████ ██████████ ████████ ███████ █████████ ███ █
██ ███████████████ ████ ██
██
pricing_table_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████████ ███████████████ ████████ █████████ ███████████
██████ ██████ █ █
███████ █ █████ ███████ ████████ █████████ █
█
█████████ █
█████████████████
pricing_table_cards_component.html.erb
████ ███████████████████████████████ ██████████████████████████████████████████
██ ██ ██████████████ ██
████ ███████████ ████████████ ██████████████ ███████
████ ██████████████████ ████████████ ██████████ ████████████ █████████████████ █████
███████
█████████████
█████████████████████
█████████████████████████████████████████
█████████████████████████████████████████
█████████████████ ████ ████ ███████ ███████████ ██████████████ ██████████████ ████████████ ██████████████████████████ ████████████████████ ███████████████████████████ ███ █████████████████████ ███
pricing_table_cards_component.rb
█ ██████████████████████ ████
█████ ██████████████████████████ █ ███████████████████
███ ██████████████████ █████████ ████ ███████████████ ██████ ██████████████ ██████████ █████████████ █████████ ████████████████ █████ █████ ████████
██████ █ █████
█████████ █ ████████
███████████████ █ ██████████████
██████████████ █ █████████████
█████████████ █ ████████████
████████████████ █ ███████████████
pricing_table_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████████ ███████████████ ████████ █████████ ███████████
██████ ██████ █ █
███████ █ █████ ███████ ████████ █████████ █
█
█████████ █
█████████████████
Comparazione
Tabella comparativa delle funzionalità con segni di spunta tra i piani
_pricing_table.html.erb
███
███████ █████ █████████ █ ██████████ █████ █████████
██████
███ ██████ ██████████████████████████████████████ ██████ █
█ █████ ██████████ ██████ ████ █████████████ █████ ██████████ ████ █████████ █████████ ███ ██
█ █████ ██████ ██████ █████ █████████████ ██████ ██████████ ████ █████████ █████████ ████ ████████ ████ ██
█ █████ █████████████ ██████ █████ █████████████ ██████ ██████████ ████████ ███████ █████████ ███ █
██ ███████████████ █
█ █████ ███████ █████████ █
pricing_table_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████████ ███████████████ ████████ █████████ ███████████
██████ ██████ █ █
███████ █ █████ ███████ ████████ █████████ █
█
█████████ █
█████████████████
pricing_table_comparison_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████████ █ ███████████████████
███ ██████████████████ ████████████████ █████████ ████ ███████████████ ██████ ██████████████ ██████████ █████████████ █████████ ████████████████ █████ █████ ████████
██████ █ █████
███████████████ █ ██████████████
█████████ █ ████████
███████████████ █ ██████████████
██████████████ █ █████████████
█████████████ █ ████████████
pricing_table_comparison_component.html.erb
████ ███████████████████████████████ ██████████████████████████████████████████
██ ██ ██████████████ ██
████ ███████████ ████████████ ██████████████ ███████
████ ██████████████████ ████████████ ██████████ ████████████ █████████████████ █████
███████
█████████████
█████████████████████
█████████████████████████████████████████
█████████████████████████████████████████
█████████████████ ████ ████ ███████ ███████████ ██████████████ ██████████████ ████████████ ██████████████████████████ ████████████████████ ███████████████████████████ ███ █████████████████████ ███
pricing_table_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████████ ███████████████ ████████ █████████ ███████████
██████ ██████ █ █
███████ █ █████ ███████ ████████ █████████ █
█
█████████ █
█████████████████
Registro delle modifiche
- Initial release with cards and comparison styles
- Monthly/yearly billing toggle
- Popular plan highlighting
Ottieni l'Accesso Completo
Sblocca il codice sorgente di questo componente e di tutti gli altri. Un solo pagamento per l'accesso a vita.
Ottieni l'Accesso Ora