Pricing Hint Top Bar Banner Block for React

Edit PRICE at the top of the file: monthly is the price you pay by the month, annual the monthly price on the annual plan, plus the link's words and address. The percentage is OFF, computed as one minus the annual price over the monthly one, rounded to a whole number, so the headline and the figures beside it can't disagree. Keep the figures in the same currency; for another one, change the symbol in the two spans.

Struck text is often read like any other, so the line adds two visually hidden pieces: "was" before the monthly price and ", now" before the annual one. A screen reader reads "Annual plans are 53% off: was $19, now $9/mo, Upgrade". The prices sit in one span with dir="ltr", so the currency symbols and digits keep their order in a right-to-left page.

A pricing hint is a standing line, not a notice: nothing in it expires, and it takes no more room than a nav link. If you want one that can be put away, the dismissible top bar shows the fold, the focus move and the status line you would add.

Show a date only if you generate it, from your server or a countdown that starts in the browser (see the countdown banners). A typed calendar date goes stale and leaves a banner that is wrong. The block leaves it out for that reason.

The sentence is isolated in a bdi so its colon and percentage keep their place, the prices keep their left-to-right order in their own span, and the arrow on the link turns around. The line itself stays centred.

The line wraps to two lines at most at 320 pixels: the sentence on the first, the prices and the link on the second. The prices never break between the struck and the current one.