Cost Breakdown Bars
The $185 tote split into five labeled bars with dollar amounts and a note on each line that adds to the price.
The $185 tote split into five labeled bars with dollar amounts and a note on each line that adds to the price.
The Ecommerce Collection unlocks the source for every Ecommerce block. All Access unlocks every Collection.
Already purchased? Log in
Cost Breakdown Bars opens the $185 tote into five labeled rows: materials $52, labor $48, freight and duty $14, overhead $31, margin $40. Each row carries a thin bar sized to its share of the total, a dollar amount in tabular-nums, and a one-line note, labor as “94 minutes at the bench, paid by the hour, not the piece.” The footer bridges to the next block: “the margin line is what pays for repairs, returns, and the bench between them.”
Cost lines are one array. The bar width is derived from the real fraction of the total, nothing rounded to tell a nicer story.
Reach for this block at the top of a pricing transparency page, directly above the margin explainer. The five numbers must add to the actual list price on the day the page is live.
A natural flow around it on an Ecommerce Pro page:
Before
After
One strong use is the five line tote. Other breakdowns:
Tip: the note under labor, “paid by the hour, not the piece,” is load bearing copy. It names the wage model and earns the number beside it.