Input Cost Index
Four stat cards hold each raw input cost with its current rate, twelve month movement, and a trend sparkline, above the pass through rule line.
Four stat cards hold each raw input cost with its current rate, twelve month movement, and a trend sparkline, above the pass through rule line.
Search blocks by description or jump to a page.
The source for every Ecommerce block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Input Cost Index publishes the four raw costs behind the price as stat cards: canvas at $8.40 a yard, bridle leather at $6.90 a square foot, brass hardware at $4.15 a set, and freight and duty at $2.60 a bag. Each card carries its current rate in tabular-nums, a twelve month movement line, and a small inline sparkline drawn in theme tokens, leather climbing 11.4% while freight falls 18%. The footer states the pass through rule that links these numbers to the price.
The inputs are one array and every sparkline is a plain SVG polyline, no chart library. The rule in the footer is the load bearing part: it commits the price to move in both directions when an input holds a change for two quarters.
Reach for this block on a pricing transparency page, below the cost breakdown bars and near the history table, so a price move has its raw cause on the same page. The rates must be current, since a stale index is worse than none.
A natural flow around it on an Ecommerce Pro page:
Before
After
One strong use is the four inputs behind the tote. Other index panels:
Tip: include an input that fell, like the freight line here. A panel where every arrow points up reads as a price defense, not a published index.