Hero library · product
Product, centred shot
hero.product-centered-shot: any design can use this hero. It suits the styles below; pairing it with another style makes the picker warn about a clash.
- Rule
- Product launch layout on one axis: a short product-name headline, a wide 16:9 product shot that dominates the hero, a row of 3–4 specs divided by rules, then price and one CTA.
- Slots
eyebrow, headline, heroImage, stats[3..4], meta, cta- Grid
- stack
3-10 - Notes
- The product shot must be the largest element (wider than the headline, at least 70% of the content width). Background is the plain page or surface colour — no gradient glow behind the product.
Do
- Let the product shot dominate: 16:9, at least 70% of the content width, on the plain page or surface colour.
- Keep the headline to the product name or a 2–5 word line.
- Under the shot, a row of 3–4 specs (figure over label, e.g. '19 dB' / 'at full speed') separated by vertical rules.
- End with price (or availability) next to one primary CTA.
Don't
- Don't put a coloured glow, gradient or blurred blob behind the product.
- Don't add a subhead paragraph and two buttons — specs replace the paragraph.
- Don't use lifestyle photography here; it is a clean product shot.
Phone width
- Shot at 4:3 full width; specs become a 2×2 grid; price above a full-width CTA.
Try this hero in the pickerllms.txt