Detail callout

One image with numbered markers on it, and the same numbered notes listed beside it. Hover a marker and its note appears over the picture; read the list and you get all of them without hovering anything.

This is the section for construction. A drop brand charging a premium has to show the work, and “double-stitched and bar-tacked at the stress point” means more pointed at the actual seam than buried in a product description. Use it on an about page, a product story page, or once on the homepage.

Section settings

Setting	Type	Default	What it does
Heading	Text	Where it holds	Section heading.
Side note	Text	Construction	Side note on the right of the header row. Plain text — this section has no side-note link.
Image	Image	—	The photograph, cropped to 4:3.
Put the image on the left	Checkbox	false	Put the image on the right and the notes list on the left.
Image focal point	Select — Top / Upper / Centre / Lower / Bottom	center	What stays in frame when cropped.
Colour scheme	Select — Default / Light / Deep	default	Which ground the section sits on.
Top spacing	Range, 0–160 px	48	Top spacing.
Bottom spacing	Range, 0–160 px	48	Bottom spacing.

Detail blocks

Up to six details. Each one is both a marker on the image and a row in the list, numbered in block order.

Setting	Type	Default	What it does
Question	Text	Reinforced seam	The detail’s name. Shown in the marker’s tooltip and as the row heading.
Text	Textarea	Double-stitched and bar-tacked at the stress point, because this is where a run usually fails.	The explanation.
Across	Range, 0–100 %	35	Marker position across the image, from the left.
Down	Range, 0–100 %	40	Marker position down the image, from the top.

The preset ships with three details.

Behaviour worth knowing

The list is the content; the markers are the garnish. A marker on an image cannot be reached by keyboard and is useless on a phone, so the notes are also rendered as a numbered list — and below 860 px the markers are hidden entirely and only the list shows. Write the notes so they read on their own, without the picture.

Numbering is automatic. Markers carry 1, 2, 3; the list shows 01, 02, 03. Reorder the blocks and both renumber. There is nothing to keep in sync.

Tooltips flip side automatically based on where you put the marker, the same way the Lookbook hotspots do — a marker near the top drops its label downwards, one near an edge shifts it inwards.

The image takes the larger share of the row (roughly 1.6 to 1 against the notes column), and both columns align to the top rather than centring.

Tip

Shoot the photograph for this section, not for the catalogue. A tight three-quarter crop of a cuff, a zip garage and a hem — close enough that the markers have something to point at — beats a full-length product shot where every marker lands on the same grey expanse.