`<PricingTiers>` Component


  <PricingTiers
      tiers={[
        {
          icon: 
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M7.78078 4.74337C9.86762 3.96647 12.1289 3.79431 14.3082 4.24676C16.4912 4.69997 18.5034 5.76149 20.1165 7.30955C21.5412 8.67687 22.6041 10.3753 23.216 12.25H24.1837C26.2595 12.25 28.2485 13.0818 29.7137 14.5596C31.1786 16.0371 32 18.0392 32 20.125C32 22.2108 31.1786 24.2129 29.7137 25.6904C28.2485 27.1682 26.2595 28 24.1837 28H11.9143C11.9112 28 11.9081 28 11.905 28C9.67945 27.9997 7.49897 27.3709 5.61069 26.1853C3.71966 24.9979 2.19793 23.3002 1.21732 21.2859C0.236749 19.2716 -0.163767 17.0209 0.0607492 14.7893C0.285268 12.5577 1.12595 10.4336 2.48826 8.65831C3.85063 6.88299 5.68027 5.5276 7.77002 4.74732C7.7736 4.74598 7.77719 4.74466 7.78078 4.74337ZM8.45986 6.62462C6.72714 7.27368 5.20789 8.39951 4.07492 9.8759C2.93976 11.3551 2.23812 13.1267 2.0507 14.9895C1.86329 16.8524 2.19775 18.7305 3.01556 20.4104C3.83333 22.0903 5.10126 23.5038 6.67419 24.4914C8.24704 25.479 10.0622 26.0013 11.9135 26C11.917 26 11.9205 26 11.924 26H24.1837C25.7235 26 27.202 25.3831 28.2934 24.2823C29.3851 23.1812 30 21.6859 30 20.125C30 18.5641 29.3851 17.0688 28.2934 15.9677C27.202 14.8669 25.7235 14.25 24.1837 14.25H22.466C22.0092 14.25 21.6105 13.9405 21.4972 13.498C21.0332 11.6854 20.0746 10.0414 18.7316 8.75254C17.3887 7.46372 15.7152 6.5815 13.9017 6.205C12.0882 5.82851 10.2064 5.97255 8.46966 6.62102C8.4664 6.62223 8.46313 6.62343 8.45986 6.62462Z" fill="#727274"/>
            </svg>,
          title: 'Development',
          price: 'Custom Pricing',
          description: '<p>Managed by your team on your infrastructure of choice. Recommended for teams with custom deployment requirements</p>',
          cta: {
            type: 'button',
            url: '#',
            title: 'Try it for free',
            variant: 'secondary'
          }
        }
      ]}
    />

Props

Name	Description
`tag` string	Small text that appears at the top of the card. Should be limited to <10 characters. Eg: "Beta"
`icon` element	Flight Icon as React element
`title*` string	Tier name
`label` string	Pricing information
`price` string	Price detail
`consumption` string	Consumption detail
`description*` string	Detailed description of tier (html string)
`cta*` object	Button or text link call to action Object contains nested props, see below:
`cta.url*` string
`cta.title*` string
`cta.type` string	Options: `"button"`, `"textLink"`
`cta.variant` string	Options: `"primary"`, `"secondary"`
`cta.brand` string	Options: `"neutral"`
`cta.onClick` function	A function that will be called when the button is clicked.
`footnote` string	Small footer (html string)