`<PricingFeatures>` Component


   <PricingFeatures
      features={[
        {
          heading: 'Features',
          content: {
            tabs: [
              {
                label: {
                  icon: <div style={{ height: '24px' }}><span style={{ verticalAlign: 'middle' }}>key</span></div>,
                  heading: 'Secrets Management',
                },
                content: {
                  table: {
                    columns: ['', 'Development', 'Starter'],
                    rows: [
                      {
                        header: {
                          heading: '<p>Monitored 24/7</p>',
                        },
                        cells: [true, true],
                      },
                      {
                        header: {
                          heading:
                            '<p>Advanced data protection module (ADP)</p>',
                        },
                        cells: [
                          {
                            heading: '<p>Heading</p>',
                          },
                          true,
                        ],
                      },
                      {
                        header: {
                          heading: '<p>Cross-region</p>',
                        },
                        cells: [false, true],
                      },
                      {
                        header: {
                          heading: '<p>Dynamic Secrets</p>',
                          content:
                            ' <p>Dynamic secrets are generated on demand and are unique to a client and can be revoked immediately after use, minimizing the life of a secret.</p>',
                        },
                        cells: [true, true],
                        isCollapsible: true,
                      },
                      {
                        header: {
                          heading: '<p>Dynamic <a href="#">Secrets</a></p>',
                          content:
                            '<p>Dynamic secrets are generated on demand and are unique to a client and can be revoked immediately after use, minimizing the life of a secret.</p>',
                        },
                        cells: [
                          {
                            heading: '<p>Single node</p>',
                            content:
                              '<p><a href="#">Extra Small</a> (2 vCPU, 1 GiB RAM) - $0.03/hr</p>',
                          },
                          {
                            heading: '<p>3-node HA Cluster</p>',
                            content:
                              '<p>Small (2 vCPU, 8 GiB RAM) - $1.578/hr plus $0.158/hr per client</p><p>Medium (4 vCPU, 16 GiB RAM) - $3.163/hr plus $0.127/hr per client</p><p>Large (8 vCPU, 32 GiB RAM) - $7.489/hr plus $0.075/hr per client</p>',
                          },
                        ],
                        isCollapsible: true,
                      },
                    ],
                  },
                },
              },
              {
                label: {
                  icon: <div style={{ height: '24px' }}><span style={{ verticalAlign: 'middle' }}>lock</span></div>,
                  heading: 'Data Protection',
                },
                content: {
                  table: {
                    columns: ['', 'Development', 'Starter'],
                    rows: [
                      {
                        header: {
                          heading: '<p>Dynamic Secrets</p>',
                          content:
                            ' <p>Dynamic secrets are generated on demand and are unique to a client and can be revoked immediately after use, minimizing the life of a secret.</p>',
                        },
                        cells: [true, true],
                        isCollapsible: true,
                      },
                      {
                        header: {
                          heading: '<p>Dynamic <a href="#">Secrets</a></p>',
                          content:
                            '<p>Dynamic secrets are generated on demand and are unique to a client and can be revoked immediately after use, minimizing the life of a secret.</p>',
                        },
                        cells: [
                          {
                            heading: '<p>Single node</p>',
                            content:
                              '<p><a href="#">Extra Small</a> (2 vCPU, 1 GiB RAM) - $0.03/hr</p>',
                          },
                          {
                            heading: '<p>3-node HA Cluster</p>',
                            content:
                              '<p>Small (2 vCPU, 8 GiB RAM) - $1.578/hr plus $0.158/hr per client</p><p>Medium (4 vCPU, 16 GiB RAM) - $3.163/hr plus $0.127/hr per client</p><p>Large (8 vCPU, 32 GiB RAM) - $7.489/hr plus $0.075/hr per client</p>',
                          },
                        ],
                        isCollapsible: true,
                      },
                    ],
                  },
                },
              },
              {
                label: {
                  icon: <div style={{ height: '24px' }}><span style={{ verticalAlign: 'middle' }}>lock</span></div>,
                  heading: 'Identity-based access',
                },
                content: {
                  table: {
                    columns: ['', 'Development', 'Starter'],
                    rows: [
                      {
                        header: {
                          heading: '<p>Dynamic Secrets</p>',
                          content:
                            ' <p>Dynamic secrets are generated on demand and are unique to a client and can be revoked immediately after use, minimizing the life of a secret.</p>',
                        },
                        cells: [true, true],
                        isCollapsible: true,
                      },
                      {
                        header: {
                          heading: '<p>Dynamic <a href="#">Secrets</a></p>',
                          content:
                            '<p>Dynamic secrets are generated on demand and are unique to a client and can be revoked immediately after use, minimizing the life of a secret.</p>',
                        },
                        cells: [
                          {
                            heading: '<p>Single node</p>',
                            content:
                              '<p><a href="#">Extra Small</a> (2 vCPU, 1 GiB RAM) - $0.03/hr</p>',
                          },
                          {
                            heading: '<p>3-node HA Cluster</p>',
                            content:
                              '<p>Small (2 vCPU, 8 GiB RAM) - $1.578/hr plus $0.158/hr per client</p><p>Medium (4 vCPU, 16 GiB RAM) - $3.163/hr plus $0.127/hr per client</p><p>Large (8 vCPU, 32 GiB RAM) - $7.489/hr plus $0.075/hr per client</p>',
                          },
                        ],
                        isCollapsible: true,
                      },
                    ],
                  },
                },
              },
              {
                label: {
                  icon: <div style={{ height: '24px' }}><span style={{ verticalAlign: 'middle' }}>lock</span></div>,
                  heading: 'Multi-datacenter & Scale',
                },
                content: {
                  table: {
                    columns: ['', 'Development', 'Starter'],
                    rows: [
                      {
                        header: {
                          heading: '<p>Dynamic Secrets</p>',
                          content:
                            ' <p>Dynamic secrets are generated on demand and are unique to a client and can be revoked immediately after use, minimizing the life of a secret.</p>',
                        },
                        cells: [true, true],
                        isCollapsible: true,
                      },
                      {
                        header: {
                          heading: '<p>Dynamic <a href="#">Secrets</a></p>',
                          content:
                            '<p>Dynamic secrets are generated on demand and are unique to a client and can be revoked immediately after use, minimizing the life of a secret.</p>',
                        },
                        cells: [
                          {
                            heading: '<p>Single node</p>',
                            content:
                              '<p><a href="#">Extra Small</a> (2 vCPU, 1 GiB RAM) - $0.03/hr</p>',
                          },
                          {
                            heading: '<p>3-node HA Cluster</p>',
                            content:
                              '<p>Small (2 vCPU, 8 GiB RAM) - $1.578/hr plus $0.158/hr per client</p><p>Medium (4 vCPU, 16 GiB RAM) - $3.163/hr plus $0.127/hr per client</p><p>Large (8 vCPU, 32 GiB RAM) - $7.489/hr plus $0.075/hr per client</p>',
                          },
                        ],
                        isCollapsible: true,
                      },
                    ],
                  },
                },
              },
               {
                label: {
                  icon: <div style={{ height: '24px' }}><span style={{ verticalAlign: 'middle' }}>lock</span></div>,
                  heading: 'Advanced Data Protection',
                },
                content: {
                  table: {
                    columns: ['', 'Development', 'Starter'],
                    rows: [
                      {
                        header: {
                          heading: '<p>Dynamic Secrets</p>',
                          content:
                            ' <p>Dynamic secrets are generated on demand and are unique to a client and can be revoked immediately after use, minimizing the life of a secret.</p>',
                        },
                        cells: [true, true],
                        isCollapsible: true,
                      },
                      {
                        header: {
                          heading: '<p>Dynamic <a href="#">Secrets</a></p>',
                          content:
                            '<p>Dynamic secrets are generated on demand and are unique to a client and can be revoked immediately after use, minimizing the life of a secret.</p>',
                        },
                        cells: [
                          {
                            heading: '<p>Single node</p>',
                            content:
                              '<p><a href="#">Extra Small</a> (2 vCPU, 1 GiB RAM) - $0.03/hr</p>',
                          },
                          {
                            heading: '<p>3-node HA Cluster</p>',
                            content:
                              '<p>Small (2 vCPU, 8 GiB RAM) - $1.578/hr plus $0.158/hr per client</p><p>Medium (4 vCPU, 16 GiB RAM) - $3.163/hr plus $0.127/hr per client</p><p>Large (8 vCPU, 32 GiB RAM) - $7.489/hr plus $0.075/hr per client</p>',
                          },
                        ],
                        isCollapsible: true,
                      },
                    ],
                  },
                },
              },
            ],
          },
          footnote:
            '<p>* Sample footnote</p><p>With <strong>multiple</strong> lines</p>',
        },
        {
          heading: 'Support',
          content: {
            table: {
              columns: null,
              rows: [
                {
                  header: {
                    heading: '<a>Bronze</a>',
                  },
                  cells: [true, true],
                },
                {
                  header: {
                    heading: '<a>Silver</a>',
                  },
                  cells: [false, true],
                },
                {
                  header: {
                    heading: '<a>Service Level Agreement</a>',
                  },
                  cells: [true, false],
                },
              ],
            },
          },
        },
        
      ]}
      download={{
        heading: 'Download the entire feature edition chart',
        description:
          'Ultricies risus molestie cursus metus mattis consectetur amet vitae eu. A diam tellus id neque urna auctor cursus ipsum.',
        pdfLink: {
          title: 'Download PDF',
          url: 'https://www.datocms-assets.com/2885/1650544076-terraform-full-feature-pricing-table_v3.pdf',
        },
      }}
    />

Props

Name	Description
`features` array	Array members must be of the type below:
`features[x]` object	Object contains nested props, see below:
`features[x].heading*` string
`features[x].footnote` string
`features[x].content*` object	Tabs or Table. See below

Content Props: Tabs

Name	Description
`tabs` array	Array members must be of the type below:
`tabs[x]` object	Object contains nested props, see below:
`tabs[x].label*` object	Object contains nested props, see below:
`tabs[x].label.icon*` React.ReactNode	Icon displayed in tab
`tabs[x].label.heading*` string	Tab name
`tabs[x].content*` object	Object contains nested props, see below:
`tabs[x].content.table*` table	See Table Props below

Content Props: Table

Name	Description
`columns` array	Array of strings used for the column headers. If you want the first column header to be blank, use an empty string in the 0 index (['', 'Col 1', 'Col 2']). This is recommended
`rows*` array	Array members must be of the type below:
`rows[x]` object	Object contains nested props, see below:
`rows[x].header*` object	Object contains nested props, see below:
`rows[x].header.heading*` string
`rows[x].header.content` string
`rows[x].isCollapsible` boolean	Controls collapsibility of row
`rows[x].cells*` array	Array of objects or boolean items Array members must be of the type below:
`rows[x].cells[x]*` TextCell \| boolean	If boolean, check or x-circle flight icon will be rendered. Otherwise, text will be displayed. See TextCell Props below

TextCell Props

Name	Description
`heading*` string (html string)
`content` string (html string)

Component Props: StickyTiers

Name	Description
`isVisible` boolean	If true, sticky styles will be applied to the component
`tiers` array	Titles ideally should match column titles in tables. Maximum 5. Array members must be of the type below:
`tiers[x]` object	Object contains nested props, see below:
`tiers[x].title*` string
`tiers[x].cta` object	Object contains nested props, see below:
`tiers[x].cta.title*` string
`tiers[x].cta.url*` string
`tiers[x].cta.onClick` function	A function that will be called when the button is clicked.

<PricingFeatures> Component

Code Editor

Props

Content Props: Tabs

Content Props: Table

TextCell Props

Component Props: StickyTiers

`<PricingFeatures>` Component