monster-pricing-table

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:

• CDN <script type="module" src="https://unpkg.com/monster-pricing-table@1.0.0/dist/index.js"></script>
• npm npm i monster-pricing-table

The pricing table component receives 2 properties:

• Theme

{
    "primary": "#0874de", 
    "secondary": "#FAE427"
}

• 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",
    "footerPriceLabelPartOne": "Pricing information",
    "footerPriceLabelPartTwo": "Pricing information",
    "footerPrice": "Price number",
    "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"></monster-pricing-table>

Preview

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