Company Scorecard
DataTwo subjects, a row each, built badge by badge across a cross divider so the healthy row lands before the other one undercuts it
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
What you can change · 2 settings
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
- Rows *rows · array
One row, or two for the comparison this is built for.
now: 2 items
- Brandbrand · string
Brand token id, one of the keys of BRANDS.
now: ledger
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A two-row comparison scorecard on a cross divider: each row has a rounded logo tile on the left with a small outlined pill under it carrying the headline figure, and four badges to the right of the vertical rule. Badges are ring gauges that sweep to a percentage, or glyphs, a shield with a tick, an audience, a falling chart, a money bag, a stack. The top row is drawn in the accent colour and the bottom in the alternate, and colour is the only thing saying which is which. Badges build in reading order across the top row and then across the bottom, never both at once.
