Karten

Nebeneinanderliegende Preiskarten mit Funktionslisten

_pricing_table.html.erb

███
  ███████ █████ █████████ █ █████ █████ █████████

  ██████
    ███ ██████ █████████████████████████████████ ██████ █
      █ █████ ██████████ ██████ ████ █████████████ █████ ████████████ ████ █████████████ █████████ ███ ██████████ ██████ ██████████ ██████████ ████ █████████ █████████ ███ ██
      █ █████ ██████ ██████ █████ █████████████ ██████ ████████████ ████ ███████ █████████ ███████████ ██████████ █████████ ██████████ ██████████ ████ █████████ █████████ ████ ████████ ████ ██
      █ █████ █████████████ ██████ █████ █████████████ ██████ ████████████ ████ █████ ██████ █████████ ████████ ███████████ █████ ██████████ ██████████ ████████ ███████ █████████ ███ █
    ██ ███████████████ ████ ██
██

Get Access to View Code

pricing_table_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████████████ ███████████████ ████████ █████████ ███████████
  ██████ ██████ █ █
    ███████ █ █████ ███████ ████████ █████████ █
  █

  █████████ █
    █████████████████

Get Access to View Code

pricing_table_cards_component.html.erb

████ ███████████████████████████████ ██████████████████████████████████████████
  ██ ██ ██████████████ ██
    ████ ███████████ ████████████ ██████████████ ███████
      ████ ██████████████████ ████████████ ██████████ ████████████ █████████████████ █████
        ███████
          █████████████
          █████████████████████
          █████████████████████████████████████████
          █████████████████████████████████████████
          █████████████████ ████ ████ ███████ ███████████ ██████████████ ██████████████ ████████████ ██████████████████████████ ████████████████████ ███████████████████████████ ███ █████████████████████ ███

Get Access to View Code

pricing_table_cards_component.rb

█ ██████████████████████ ████

█████ ██████████████████████████ █ ███████████████████
  ███ ██████████████████ █████████ ████ ███████████████ ██████ ██████████████ ██████████ █████████████ █████████ ████████████████ █████ █████ ████████
    ██████ █ █████
    █████████ █ ████████
    ███████████████ █ ██████████████
    ██████████████ █ █████████████
    █████████████ █ ████████████
    ████████████████ █ ███████████████

Get Access to View Code

pricing_table_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████████████ ███████████████ ████████ █████████ ███████████
  ██████ ██████ █ █
    ███████ █ █████ ███████ ████████ █████████ █
  █

  █████████ █
    █████████████████

Get Access to View Code

Optionen

Name	Typ	Standard	Beschreibung
`plans` *	Array	erforderlich	Array of plan hashes with :name, :price, :yearly_price, :period, :description, :features, :cta_label, :cta_href, :popular
`currency`	String	`"$"`	Currency symbol
`billing_period`	Boolean	`false`	Show monthly/yearly toggle
`monthly_label`	String	`"Monthly"`	Monthly toggle label
`yearly_label`	String	`"Yearly"`	Yearly toggle label
`yearly_discount`	String	`"Save 20%"`	Yearly discount badge text

Name	Typ	Standard	Beschreibung
`plans` *	Array	erforderlich	Array of plan hashes
`currency`	String	`"$"`
`billing_period`	Boolean	`false`
`monthly_label`	String	`"Monthly"`
`yearly_label`	String	`"Yearly"`
`yearly_discount`	String	`"Save 20%"`

Vergleich

Funktionsvergleichstabelle mit Häkchen über die Pläne hinweg

_pricing_table.html.erb

███
  ███████ █████ █████████ █ ██████████ █████ █████████

  ██████
    ███ ██████ ██████████████████████████████████████ ██████ █
      █ █████ ██████████ ██████ ████ █████████████ █████ ██████████ ████ █████████ █████████ ███ ██
      █ █████ ██████ ██████ █████ █████████████ ██████ ██████████ ████ █████████ █████████ ████ ████████ ████ ██
      █ █████ █████████████ ██████ █████ █████████████ ██████ ██████████ ████████ ███████ █████████ ███ █
    ██ ███████████████ █
      █ █████ ███████ █████████ █

Get Access to View Code

pricing_table_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████████████ ███████████████ ████████ █████████ ███████████
  ██████ ██████ █ █
    ███████ █ █████ ███████ ████████ █████████ █
  █

  █████████ █
    █████████████████

Get Access to View Code

pricing_table_comparison_component.rb

█ ██████████████████████ ████

█████ ███████████████████████████████ █ ███████████████████
  ███ ██████████████████ ████████████████ █████████ ████ ███████████████ ██████ ██████████████ ██████████ █████████████ █████████ ████████████████ █████ █████ ████████
    ██████ █ █████
    ███████████████ █ ██████████████
    █████████ █ ████████
    ███████████████ █ ██████████████
    ██████████████ █ █████████████
    █████████████ █ ████████████

Get Access to View Code

pricing_table_comparison_component.html.erb

████ ███████████████████████████████ ██████████████████████████████████████████
  ██ ██ ██████████████ ██
    ████ ███████████ ████████████ ██████████████ ███████
      ████ ██████████████████ ████████████ ██████████ ████████████ █████████████████ █████
        ███████
          █████████████
          █████████████████████
          █████████████████████████████████████████
          █████████████████████████████████████████
          █████████████████ ████ ████ ███████ ███████████ ██████████████ ██████████████ ████████████ ██████████████████████████ ████████████████████ ███████████████████████████ ███ █████████████████████ ███

Get Access to View Code

pricing_table_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████████████ ███████████████ ████████ █████████ ███████████
  ██████ ██████ █ █
    ███████ █ █████ ███████ ████████ █████████ █
  █

  █████████ █
    █████████████████

Get Access to View Code

Optionen

Name	Typ	Standard	Beschreibung
`plans` *	Array	erforderlich	Array of plan hashes with :name, :price, :yearly_price, :cta_label, :cta_href, :popular
`feature_groups` *	Array	erforderlich	Array of feature group hashes with :name and :features array
`currency`	String	`"$"`
`billing_period`	Boolean	`false`
`monthly_label`	String	`"Monthly"`
`yearly_label`	String	`"Yearly"`
`yearly_discount`	String	`"Save 20%"`

Name	Typ	Standard
`plans` *	Array	erforderlich
`feature_groups` *	Array	erforderlich
`currency`	String	`"$"`
`billing_period`	Boolean	`false`
`monthly_label`	String	`"Monthly"`
`yearly_label`	String	`"Yearly"`
`yearly_discount`	String	`"Save 20%"`

Änderungsprotokoll v1.0.0

- Initial release with cards and comparison styles
- Monthly/yearly billing toggle
- Popular plan highlighting

Preistabelle

Karten

Optionen

Vergleich

Optionen

Änderungsprotokoll v1.0.0

Vollzugang erhalten