1.0.11 • Published 1 year ago

@monster_property_services/monster-pricing-table v1.0.11

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

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>
  1. 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

1.0.11

1 year ago

1.0.10

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago