Hero

När du behöver det

Sidans öppningsblock — det första patienten möter på en kommunikativ yta. Bokningssidor, landningssidor, en mottagningsstart. Hero ramar in vad sidan handlar om och vad nästa steg är. En sida har en hero. Aldrig fler.

Principen

Hero är sidans hälsning. Den nära experten välkomnar utan kallprat, går rakt på det patienten är där för, och pekar mot ett tydligt nästa steg. Inga slogans, inga tom stolthetsord. Konkret om vad användaren får — inte vad Aleris är.

Strukturen

Rubrik (h1) — det här är vad sidan handlar om. Aktivt språk, patientens perspektiv.
Lead — en till två meningar som förklarar erbjudandet och förankrar i något konkret (tid, format, vem). Frivillig på korta sidor.
Primär CTA — orange knapp, en åtgärd. Aldrig två CTA i hero.

Bilden är frivillig. Ingen bild är en giltig hero — sand-100-ytan bär texten själv.

Layout

Hero sitter direkt på --surface-page (sand-100). Ingen kort-wrapper. Hero är sidans hälsning, inte ett innehållsblock — kortet skulle invertera hierarkin.
Textkolumnens läs-bredd: max-width: 720px. Sidans yttre --grid-max-width-communicative (1200px) är för helsidans innehåll, inte för rubrikens mätbredd.
Vertikalt utrymme: padding-block-start: var(--spacing-3xl) (96px), padding-block-end: var(--spacing-2xl) (72px). Rubriken behöver luft ovanför sig för att läsas som sidans öppning, inte som en sektion bland andra.
Avstånd mellan rubrik, lead och CTA: var(--spacing-md) (24px).

Bild i hero

Frivillig. Om bilden används:

Aspect ratio: --image-ratio-hero (16:9).
Format-strategi enligt aleris-baseline-images.md (AVIF → WebP → JPEG).
Bild höger om text på desktop (text-tyngd vänster); bild ovanför text på mobile.
EXIF-metadata strippas. Klinikfoton kan annars läcka GPS-data.

Hero utan bild är default. Bilden tillför bara värde när den är relevant och välproducerad.

Exempel

✅

Träffa en specialist som har tid att lyssna

Berätta vad du söker hjälp med, så hittar vi rätt specialist och en tid som passar. En första konsultation tar ungefär 30 minuter — på plats eller via video.

[Boka tid]

— rakt på, konkret om format och tid, en åtgärd.

❌

Sveriges ledande privata vårdgivare

Vi erbjuder vård i världsklass med patienten i centrum. Tillgänglig vård när du behöver den — det är vårt löfte.

[Läs mer] [Boka tid]

— stolthetsord, två CTA, säger inget om vad användaren får.

Tokens

Token	Roll
`--surface-page`	Sidans bakgrund (sand-100, kommunikativ)
`--type-h1-size` / `--type-h1-weight` / `--type-h1-line-height`	Rubrik
`--type-lead-size` / `--type-lead-weight` / `--type-lead-color`	Lead-text
`--button-primary-bg` / `--button-primary-text`	Primär CTA
`--spacing-3xl` / `--spacing-2xl`	Vertikalt utrymme
`--spacing-md`	Avstånd mellan rubrik, lead, CTA
`--image-ratio-hero`	Bildformat när bild används

Tillgänglighet

En <h1> per sida — och den lever i hero. Sektionsrubriker längre ner är <h2> eller djupare.
CTA är <a> (navigation) eller <button> (åtgärd) — inte ett <div> med klickhanterare.
CTA har minst 44px höjd och tydlig fokusring (--state-focus-ring).
Om bild används, ge den en alt som beskriver vad den visar i sidans kontext, inte generiskt ("Patient hos läkare" ✅, "Bild av två personer" ❌).

Snabbtest

Förstår patienten på fem sekunder vad sidan handlar om och vad de kan göra härnäst? Om inte — skriv om rubriken eller bytt CTA-text.