Hero library · product
Product with flanking specs
hero.product-floating-specs: any design can use this hero. It suits the styles below; pairing it with another style makes the picker warn about a clash.
- Rule
- A square product shot in 4–9 is flanked by spec callouts: 2–3 feature labels in 1–3 and 2–3 numbers in 10–12, each with a top rule; the headline runs 1–8 underneath, price and CTA in 10–12.
- Slots
heroImage, facts[2..3], stats[2..3], headline, meta, cta- Grid
- features
1-3 · product 4-9 · numbers 10-12 · headline 1-8 · buy 10-12 - Notes
- In the real build, each callout can draw a thin leader line to the part of the product it describes (SVG, hidden on phones). Callouts are text, not cards.
Do
- Place a square product shot in columns 4–9 of the first row.
- Flank it with 2–3 feature callouts (1–3) and 2–3 big numbers (10–12), each under a top rule.
- Put the headline below the product across 1–8, with price and CTA bottom-right.
- Optionally draw hairline leader lines from callouts to the product (desktop only).
Don't
- Don't put callouts in cards, pills or glass panels.
- Don't place the headline above the product.
- Don't use more than six callouts in total.
Phone width
- Product first at 1:1, then features and numbers as two short ruled lists, then headline and CTA.
- Hide leader lines.
Try this hero in the pickerllms.txt