Client Wins Awards Block for React

Edit WINS at the top of the file. Each win has the client, the award, the programme, a fixed year and a result with a figure and a label. The header's count is the number of wins in the latest year in the list, and the three facts count the list's length and its distinct programmes, so adding a row updates all three.

They are the first letters of the first two words of the customer's name, drawn as text in a square tile, so no logo or photo is needed. They are decoration for assistive technology; the name is the row's heading. To show a customer's real logo, replace the tile with an img that has empty alt text, and keep the name in the heading.

The customers did, and the block says so in its header. The figure is typed text, not computed, because it comes from outside: "41% less spoilage" is a claim by the customer. Get written permission before you publish a customer's name and result, and link to the story if you have one.

The header and the facts come first, then the ledger. In each row the result moves under the name and award, so nothing needs to scroll sideways; at 320 pixels the three facts stay on one line. In a right-to-left layout the rows mirror, and figures such as "2.1×" keep their order.

The ledger is a list named "Awards won by customers". Each row opens with the customer as a heading, then the award, the programme and year with "Won with Stowbridge", then the result figure and its label. The facts are a description list, with each label before its figure.

No. Stowbridge, its customers and the Ultraton and Slatestead programmes are made up, and so are the results. Replace them with your own customers and awards.