Copywriter Sample Shelf Profile Block for React

Edit SAMPLES. Each has a title, an industry, a brief, the headline before and after, the sample copy, what the rate measures, the rate before and after in percent and how long the test ran. The lift in the closed row, the word count under the copy and the sentence with the result are worked out from those, so nothing is typed twice. Add an industry to INDUSTRIES and its chip and count appear.

No. The rates and the tests are typed examples, and every open row says so: "Example figures, not a real campaign". Replace them with your own measured results, and keep the sentence that names the test and how long it ran, so a lift is never read without its source.

It narrows the shelf to the samples in one industry and the count on each chip stays true. The open row stays open when it is still on the shelf; when it is not, the first sample that is shown opens, because one row is always open. The height of the shelf is held by an unseen copy of every row and the longest panel, so the page below never jumps.

Each sample is a heading with a button that opens its panel, and the open row cannot be closed, so the page never loses its place. The before and after headlines carry the words Before and After, not only a weight or a border. The status line is a polite live region present from the start and says the result of every choice.

The industry chips scroll sideways. A closed row keeps its title, its industry and its lift on two lines, with the name of the measure kept for a screen reader, and an open row stacks the before and after headlines one over the other.