Dimensions Diagram
Inline SVG technical line drawing paired with a table for screen readers and copy paste, four callouts.
Inline SVG technical line drawing paired with a table for screen readers and copy paste, four callouts.
The Ecommerce Collection unlocks the source for every Ecommerce block. All Access unlocks every Collection.
Already purchased? Log in
Dimensions Diagram pairs an inline SVG technical line drawing of the tote, front and side views, with a small table of the same four numbers: width 42 cm, height 35 cm, depth 14 cm, handle drop 9 cm. The lede names both registers: "The drawing is for your eyes, the table is for screen readers and copy paste." The footnote adds the honest caveat: "All measured flat and empty, +/- 1 cm, because canvas relaxes and seams are sewn by people."
One dimensions array feeds the table. The SVG is inline with dimension lines drawn from the body rectangles and labelled in muted text, stroke currentColor, no fills beyond the card background.
Reach for this block beside or just below the full spec sheet when the buyer needs to visualise how a number relates to the object, especially for carry on compliance or shelf fit decisions.
A natural flow around it on an Ecommerce Pro page:
Before
After
One strong use is the tote front and side with four callouts. Other dimension diagrams:
Tip: a separate table beside the SVG is not redundant, it is the accessible version of the same data, and buyers copy paste dimensions into spreadsheets.