Skip to content
SloplessTry the picker

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.

Live, in 3 styles it suits

In Neo-grotesk Minimal

hero.product-centered-shot · hero

Brand & product studio

We make complicated companies simple to choose

140+

launches shipped

12

years independent

9 of 10

clients return

Booking projects from June 2026

Start a project
Desktop

Brand & product studio

We make complicated companies simple to choose

140+

launches shipped

12

years independent

9 of 10

clients return

Booking projects from June 2026

Start a project
Phone, 390 px

In Scandinavian Soft

hero.product-centered-shot · hero

Brand & product studio

We make complicated companies simple to choose

140+

launches shipped

12

years independent

9 of 10

clients return

Booking projects from June 2026

Start a project
Desktop

Brand & product studio

We make complicated companies simple to choose

140+

launches shipped

12

years independent

9 of 10

clients return

Booking projects from June 2026

Start a project
Phone, 390 px

In Bento Tech

hero.product-centered-shot · hero

Brand & product studio

We make complicated companies simple to choose

140+

launches shipped

12

years independent

9 of 10

clients return

Booking projects from June 2026

Start a project
Desktop

Brand & product studio

We make complicated companies simple to choose

140+

launches shipped

12

years independent

9 of 10

clients return

Booking projects from June 2026

Start a project
Phone, 390 px