Compact Left Right CTA Block for React

Edit MONTHLY and YEARLY at the top of the file, the price of one seat a month on each billing. The three cells and the percentage are worked out from them with whole-number maths, rounded down, so it never claims more than the prices give: 15 and 12 make 20%. Change the prices and the cells follow.

The banner counts RENEWS_IN_DAYS days from the moment the page runs in the browser, so it always reads "in 5 days" however late it's visited. That's a stand-in: pass your customer's real renewal date to Relative Time Text's timestamp and it keeps the words true, changing them as the date nears. Until the browser has read the clock the sentence says "in 5 days", so nothing shifts and nothing is blank without JavaScript.

Both are links (href="#"): point Compare plans at your pricing page and Switch to annual at your billing screen. Each renders the link it's given with render, with nativeButton={false}.

No: it follows your theme. The band is drawn with the page's own lines and tokens, so it is light on a light page and dark on a dark one, and the headline, the muted line and both buttons are measured against the page colour in every preset.

Below md the text stacks above the buttons, which wrap onto a second line when they don't fit side by side, and the three cells shrink to the label and the price. Nothing has a fixed width, so it reads down to a 320 px screen.

Use it when the banner has something specific and time-bound to say, such as a renewal or a saving: it's a single line of copy and a row of figures. When the message is a plain pitch, the baseline Left Right Row Dark has the room for a larger headline.