Skip to content
SloplessTry the picker

Hero library · collage

Photo crossed by a marquee band

hero.marquee-band: any design can use this hero. It suits the styles below; pairing it with another style makes the picker warn about a clash.

Rule
Headline (1–8) and subhead + CTA (10–12) above a full-bleed 21:9 photo; an accent marquee band runs across the middle of the photo, edge to edge.
Slots
headline, subhead, cta, heroImage, tagline
Grid
headline 1-8 · aside 10-12 · photo full · band full
Notes
The band can tilt −3° in the real build. It repeats 2–4 short phrases, is aria-hidden, pauses on hover and stops under prefers-reduced-motion.

Do

  • Put the headline and the subhead + CTA in one row above the photo.
  • Run the photo full-bleed at 21:9.
  • Cross the photo's middle with one accent marquee band (onAccent text), edge to edge.
  • Pause the band on hover; stop it under prefers-reduced-motion.

Don't

  • Don't use more than one band.
  • Don't put the headline inside the band.
  • Don't scroll the band faster than one loop per 30 s.

Phone width

  • Headline, subhead, CTA; photo at 4:5 with the band across its middle at step 3.

Try this hero in the pickerllms.txt

Live, in 3 styles it suits

In Athletic Sport

hero.marquee-band · hero

Open alone, full size (desktop, tablet, phone; layout tree included)

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project
Strategy and design for companies that make thingsPositioningIdentityWebsitesStrategy and design for companies that make thingsPositioningIdentityWebsites
Desktop

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project
Strategy and design for companies that make thingsPositioningIdentityWebsitesStrategy and design for companies that make thingsPositioningIdentityWebsites
Phone, 390 px

In Neo-Brutalism

hero.marquee-band · hero

Open alone, full size (desktop, tablet, phone; layout tree included)

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project
Strategy and design for companies that make thingsPositioningIdentityWebsitesStrategy and design for companies that make thingsPositioningIdentityWebsites
Desktop

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project
Strategy and design for companies that make thingsPositioningIdentityWebsitesStrategy and design for companies that make thingsPositioningIdentityWebsites
Phone, 390 px

In Maximalist Collage

hero.marquee-band · hero

Open alone, full size (desktop, tablet, phone; layout tree included)

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project
Strategy and design for companies that make thingsPositioningIdentityWebsitesStrategy and design for companies that make thingsPositioningIdentityWebsites
Desktop

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project
Strategy and design for companies that make thingsPositioningIdentityWebsitesStrategy and design for companies that make thingsPositioningIdentityWebsites
Phone, 390 px

Suits

Athletic SportNeo-BrutalismMaximalist CollageY2K ChromeMemphisRisograph PrintEditorial MagazineSeventies Psychedelic

Clashes with

Japanese MinimalClassical BookishLuxury FashionScandinavian Soft