Metric Hero Rows Pricing Block for React

Edit the TIERS array at the top of the file. Each tier has its name, monthly price (0 shows "Free"), cta, recommended, and its metric: transfer and unit as written ("10", "TB") plus gigabytes, the same amount as a number for the bar and the price per terabyte. To lead with another metric, such as requests or seats, change the unit text in the markup and the numbers; the bars compare whatever you give them. The FACTS array holds the two lines in the header's key.

On a log scale, because 100 GB to 100 TB is three orders of magnitude and a linear bar would leave three of the four as slivers: reach maps the log of each allowance onto 35% to 100% of the track, so the four bars fill 35%, 57%, 78% and 100%, and the footnote says so. The floor leaves room for the first figure to sit at its bar's end. The bars are decorative (the figure says the amount), grow from the start of their track on first paint, and are drawn at full length at once under reduced motion. In a right-to-left layout they grow from the right.

The plan's name first, as an h3, then its price and price per terabyte, the metric ("100 terabytes of data transfer per month") and the link, named with its plan ("Start trial, Scale plan") since three tiers share the label. The grid shows the figure and bar in the middle of the row, but they follow the plan in the page, so a figure is never read as the end of the row before it. The bar isn't read at all.

From the md breakpoint each row is one line of three columns: the plan in a fixed column, the bar and its figure taking the remaining width, and the button in a fixed column at the end. Below it the row is two lines from the same markup: the plan and its button, then the bar across the full width. A figure never wraps or shrinks below its text: if a short bar is narrower than its figure, the figure keeps its width and the bar grows into it.

Each call to action is a link. It's a ShineButton with render set to an a element and nativeButton={false}. Point the free and paid tiers at your sign-up or checkout route with the tier id (/checkout?plan=scale). Move recommended: true to feature another tier: its badge, primary button and darker bar move with it.

Use rows when one number is the whole difference between tiers and the price should be read against it: a bar to scale shows what each step up buys, and the falling price per unit shows the discount without a sentence. Use cards when each tier has a list of features to carry, and a table or calculator when several metered limits interact.