Pricing Table

Display Service or Product Prices in a nice way.

Overview

The pricing table is used to advertise your different services or products. It's perfectly suited for comparing different tiers of products.

Usage Examples

  • Selling products or services.
  • Comparison of product or service tiers.
  • ...

Pricing Table Properties

The pricing table is configured with the common general properties.

Item Properties (One Price)
  1. Identifier: Basic identifier (not public) to .
  2. Background: Set an optional background for the pricing table. You can choose between colors, images, gradients and patterns.
  3. Button Text: Set the text for the pricing table button (Default subscribe).
  4. Button Size: Choose a button size.
  5. Button Width: Set the button width (0 = auto)
  6. Button Color: Set the button color, choose between your sites system colors or a custom one.
  7. Link Type: Add an link to the button.
  8. The content is edited on the pricing table directly.
Pricing Table Properties / Wireframe

See it in action

Free forever

$ 0

No Payment

  • Host your site for free on Mame
  • No support
  • ..

Standard

$ 30

Billed Annually

  • Access to Everything
  • Basic Support
  • Up to 8 Sites
  • 500 MB Quota each
  • Deploy to AWS, Digital Ocean..
  • ..

Pro

$ 99.99

No Payment

  • Access to Everything
  • Premium Support
  • Up to 30 Sites
  • 1000 MB Quota each
  • Deploy to AWS, Digital Ocean..
  • ..
A pricing table with three different prices.

Interactions and Accessibility

Users can navigate between Buttons by pressing Tab and open them by pressing Enter. 

Generated HTML


<div class="mame-element mame-pricing-table" style="...">
   <figure class="accent" style="..">
      <figcaption>
         ....
      </figcaption>
   </figure>
</div>

Style / CSS Selectors


.mame-pricing-table {
  /* All Pricing tables */
}

.mame-pricing-table button {
  /* The subscribe button */
} 

JavaScript

Pricing Tables are implemented in plain HTML 5 and CSS 3. They don't need any JavaScript to work properly.

Was this article helpful?