--- title: Hero status: accepted label: shareable passed: 2026-09-25 type: baseline/pattern lang: en depends_on: - foundation/voice - foundation/typography - baseline/BASELINE last_verified: 2026-05-06 --- # Hero ## When you need it The page's opening block — the first thing the patient meets on a communicative surface. Booking pages, landing pages, a clinic's start page. The hero frames *what* the page is about and *what the next step is*. A page has one hero. Never more. ## The principle The hero is the page's greeting. The Present Expert welcomes without small talk, goes straight to what the patient is there for, and points to a clear next step. No slogans, no empty words of pride. Concrete about what the reader gets — not about what Aleris is. ## The structure 1. **Heading (h1)** — this is *what the page is about*. Active language, from the patient's point of view. 2. **Lead** — one or two sentences that explain the offer and anchor it in something concrete (time, format, who). Optional on short pages. 3. **Actions** — a hero may carry several actions, but at most one primary (orange button). The others are secondary buttons or text links. The image is optional. A hero without an image is a valid hero — the sand-100 surface carries the text on its own. ## Layout - A hero without an image, and a hero with the image beside the text, sits directly on `--surface-page` (sand-100). **No card wrapper.** The hero is the page's greeting, not a content block — a card would invert the hierarchy. - A hero with a full-width image or video is the exception. There the text sits on a white card (`--surface-card`) that overlaps the image's lower edge, and the card is what keeps the text readable against the image. The card may rest at `--shadow-e2` instead of `--shadow-e1` — it is the page's one featured element (see `baseline/BASELINE.md` § Elevation). - Reading width of the text column: `max-width: 720px`. The page's outer `--grid-max-width-communicative` (1200px) is for the full page's content, not for the heading's measure. - Vertical space: `padding-block-start: var(--spacing-3xl)` (96px), `padding-block-end: var(--spacing-2xl)` (72px). The heading needs air above it to read as the page's opening, not as one section among others. - Space between heading, lead and actions: `var(--spacing-md)` (24px). ## Image in the hero Optional. If an image is used, there are two layouts: - **Image beside text.** Image to the right of the text on desktop (text weight on the left), image above the text on mobile. Aspect ratio: `--image-ratio-hero` (16:9). - **Full-width image or video**, for communicative surfaces. The image fills the page's width and the text sits on a card, as in § Layout above. For both: - Formats and sizes as in `baseline/reference/aleris-baseline-images.md` (AVIF → WebP → JPEG). How images and video are delivered sharp and at the right size for different screens and devices is not decided here. - EXIF metadata is stripped. Clinic photos can otherwise leak GPS data. A hero without an image is the default. The image adds value only when it is relevant and well produced. ## Examples Local examples, in Swedish. ✅ > **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] — straight to the point, concrete about format and time, one action. *(Meet a specialist who has time to listen. Tell us what you need help with and we will find the right specialist and a time that suits you. A first consultation takes about 30 minutes, in person or by video. [Book an appointment])* ❌ > **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] — words of pride, two equal actions with neither one primary, says nothing about what the reader gets. *(Sweden's leading private care provider. We offer world-class care with the patient at the centre. Accessible care when you need it — that is our promise. [Read more] [Book an appointment])* ## Tokens | Token | Role | |-------|------| | `--surface-page` | Page background (sand-100, communicative) | | `--type-h1-size` / `--type-h1-weight` / `--type-h1-line-height` | Heading | | `--type-lead-size` / `--type-lead-weight` / `--type-lead-color` | Lead text | | `--button-primary-bg` / `--button-primary-text` | Primary action | | `--spacing-3xl` / `--spacing-2xl` | Vertical space | | `--spacing-md` | Space between heading, lead and actions | | `--image-ratio-hero` | Image format when an image is used | | `--surface-card` / `--shadow-e2` | The text card in a full-width image or video hero | ## Accessibility - One `

` per page — and it lives in the hero. Section headings further down are `

` or deeper. - An action is an `` (navigation) or a `