Monster Pricing table 📈

This web component shows a single pricing table with dynamic information.

Installation 📦️

You can start using this component right away like this:

1. CDN

<script type="module" src="https://unpkg.com/@monster_property_services/monster-pricing-table@latest"></script>

2. npm

npm i @monster_property_services/monster-pricing-table

The pricing table component receives 2 properties:

1. Theme

{
    "primary": "#0874de", 
    "secondary": "#FAE427",
    "ribbon": "#642EFF"
}

1. Pricing information

{
    "title": "Title of the table",
    "subtitle": "Subtitle of the table",
    "ribbon": "Ribbon text",
    "linkLabel": "Label of the bottom button",
    "linkHref": "Link to redirect on click event",
    "priceLabelPartOne": "Pricing information",
    "priceLabelPartTwo": "Pricing information",
    "price": "Price number",
    "footerDescription": "Get Complete Seasonal Snow & Ice Coverage, Absolutely No Strings Attached",
    "footerDetail": "Extra price information",
    "items": [
        {
            "title": "Item 1 title",
            "caption": "Text in the tooltip element",
            "subtitle": "Item 1 subtitle"
        },
        {
            "title": "Item 2 title",
            "caption": "Text in the tooltip element",
            "subtitle": "Item 2 subtitle"
        },
        ...
    ]}

Using the web component 🏗️:

<monster-pricing-table 
  theme="your_json_theme_data" 
  pricing="your_json_pricing_data"
  checkListDesign="true"
></monster-pricing-table>

Preview

You can see an example of this web component in here ✨: https://codepen.io/Andres2D/pen/oNRYZpo