<PricingTiers> Component

Share
Code Editor
<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

NameDescription
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)

Examples

2 Tiers

Development

Starting at$0.03

Available as a managed service on HashiCorp Cloud Platform. Recommended for most teams

Beta

Development

Custom Pricing

Managed by your team on your infrastructure of choice. Recommended for teams with custom deployment requirements


3 Tiers

Development

Starting at$1.578per hour

Clusters designed to scale with the demand of running production workloads.

Starter

Starting at$1.578per hour

Clusters designed to scale with the demand of running production workloads.

Standard

Starting at$1.578per hour

Clusters designed to scale with the demand of running production workloads.


4 Tiers

Development

Starting at$0.03per hour

Designed to get started quickly for small projects, proof-of-concepts, non-production workloads

Starter

Starting at$0.05per hour

Designed as affordable, production-ready clusters with clients included to get started quickly.

Standard

Starting at$1.578per hour

Clusters designed to scale with the demand of running production workloads.

Plus

Starting at$1.844per hour

Designed for high availability replication of secrets and policies across multiple data centers. Requires 2 clusters for replication..


5 Tiers (max)

Development

Starting at$0.03per hour

Designed to get started quickly for small projects, proof-of-concepts, non-production workloads

Starter

Starting at$0.05per hour

Designed as affordable, production-ready clusters with clients included to get started quickly.

Standard

Starting at$1.578per hour

Clusters designed to scale with the demand of running production workloads.

Plus

Starting at$1.844per hour

Designed for high availability replication of secrets and policies across multiple data centers. Requires 2 clusters for replication.

Enterprise

Designed for custom deployments