Skip to content

Pricing Cards

The Pricing Cards module shows one pricing plan as a card. Each card has a header, a price, a list of features and a call to action button. Add one Pricing Cards module for each plan and place them side by side in a row.

Content

Layout

  • Pricing Style: Default, Style 1, Style 2 or Style 3.
  • Content Alignment: Left, Center or Right. The default is Center.
  • Featured / Highlighted: Highlights this card as the recommended plan.
  • Ribbon Text: Optional badge text, for example "Popular".
  1. Open the module and go to the Content tab.
  2. In the Header group, change the Title and Subtitle.
  3. Turn on Show Icon to show an icon above the title, then pick an Icon.

Price

  1. In the Price group, enter the amount in Price.
  2. Enter your currency in Currency Symbol.
  3. Enter the Period as text, for example "/mo" or "per year". There is no fixed list.
  4. Use Period Separator for text between the price and the period, for example "/".
  5. Use Price Suffix for text printed before the price, for example "from".

Show an original price

  1. In the Price group, turn on Show Original Price.
  2. Enter the old price in Original Price. It is shown struck through next to the price.
  3. Use Original Price Position to place it Above or Side by Side. The default is Above.

Add features

Each feature is a child module named Feature.

  1. Click Add New Feature.
  2. Enter the Feature Text.
  3. Show Icon is on by default. Turn it off for a feature without an icon.
  4. Pick an Icon and an Icon Color.

Mark a feature as not included

  1. Open the settings of the Feature you want to mark.
  2. Turn on Not Included. The feature is shown muted or struck through.
  3. Turn it off to show the feature normally.

Button

  • Show Button: On by default. The button is printed only when Button Text is not empty.
  • Button Text: The label of the call to action button.
  • Button URL: Where the button links.
  • Open in New Window: Opens the link in a new tab.
  • Button Custom Class: Extra class names for the button, separated by spaces.

Design

The Design tab has these groups: Card, Icon, Header Text, Price, Features and Button.

  • Card: Background, border, box shadow and spacing for the card.
  • Icon: Icon Color, Icon Size, Area Width, Area Height, Background Color and border.
  • Header Text: Fonts for the title and subtitle, plus header padding and background color.
  • Price: Font settings for the price.
  • Features: Font settings for the feature text, plus padding.
  • Button: Font, background, border and spacing for the button.