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?

Newsletter

You can unsubscribe at any time. For information about our privacy practices, please check the privacy policy.
Made with ❤ and Mame in the European Union.
Copyright (C) 2019 - 2021 mame.app. All Rights reserved.