Dimensions Diagram

About this block

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.

When to use

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

• Full spec sheet

After

• Capacity table
• Tolerances note card

What you can display

One strong use is the tote front and side with four callouts. Other dimension diagrams:

• Backpack three view. Front, side, and base with a hip belt width callout added.
• Wallet flat lay. A single front view with card slot depth and fold height labelled.
• Carry on compliance. Callouts to the airline max with the bag shown inside the box outline.

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.