Hero

The page lead: Dark green panel beside a contained photo.

The page-leading block, the "stage" (ADR 0011, amended 2026-10-23): a photo wall to wall behind a Dark green scrim, the headline centred on it, an optional CTA under it, and the city links centred under the stage, on the page.

Text on a photo, by the repo owner's decision (ADR 0007, ADR 0037): the scrim carries the contrast, not the photo. A 75% Dark green pool sits behind the headline (Spring green on it is 7.6:1 even over pure white), a lighter wash covers the rest, and the headline is held to 18ch so it stays in the pool. The photo is blurred and decorative.

Presentational: strings are pre-localized.

The brand layout

Tone

Koti joka antaa vapauden

Vuokraa suoraan verkosta

Koteja monessa kaupungissa

With a sticker

The print material's round circle, in the stage's top-right corner. Off on the home page since 2026-10-23, beside the search bar's own count (ADR 0037).

Tone

Koti joka antaa vapauden

Vuokraa suoraan verkosta

124 homes available now!

Koteja monessa kaupungissa

With a search bar

The home page's Hero (ADR 0011, amended 2026-10-23): a white bar centred across the stage's foot, half over the photo, with the location picker the listings page uses. Its link goes to the listings page with the picked places and counts their homes. The bar is the Hero's one action, so the CTA does not show.

Tone

Props

packages/primitives/src/Hero.astro
PropTypeRequired
headingstringyes
imageSrcstringyes
imageSrcset

The photo at several widths (`… 640w, … 1280w`); the block says how wide it renders and the browser picks. Without it the block loads `imageSrc`.

string—
headingLevel1 | 2 | 3 | 4 | 5 | 6—
ctaLabel

Optional primary CTA, under the headline; rendered only when both are present, and not with `search`, which is then the Hero's one action.

string—
ctaHrefstring—
placesLabel

Optional places to start from, each a link to the homes there, under a short label. Rendered only when both are present.

string—
places{ label: string; href: string }[]—
sticker

Optional Spring green sticker in the stage's top-right corner, the print material's round circle (ADR 0037, amended 2026-10-16). Short: three or four words, already filled in ("124 homes available now!").

string—
search

Optional location picker in a white bar across the stage's foot, half over it (ADR 0011, amended 2026-10-23). Its link goes to `href` (the listings page) with the picks as `city` and `area`, or to the page of the one place picked, by its key in `placeUrls` (ADR 0043). It counts the homes they hold: the places' counts, so they match the page it opens.

{ places: Place[]; labels: PickerLabels; href: string; placeUrls?: Record<string, string>; /* "{count}" templates. */ showOne: string; showOther: string; }—