Block reference

videoHero — position: center-right, height: tall

The pinned page lead. Only ever the FIRST block: the renderer gives a leading videoHero a fixed parallax layer the page scrolls over, which is also why it's the one block a grid cell can't hold. video.desktopUrl is required — a phone gets mobileUrl or the poster, never the desktop encode. `height` picks how much of the screen it fills (full / tall = 90% / medium = 75%) and `position` is the full 3x3 grid; this one is `center-right` at `tall`, which is healf.de's masthead. A right-positioned block keeps LEFT-aligned text unless `textAlign` overrides it.

How to read this page

One rendered example of every block the page builder offers, generated by apps/cms/src/scripts/seed-sink-page.ts. Editing this page by hand is pointless — the next run overwrites it.

Each heading names the block's slug and the settings used to compose it, so you can find the same values in the admin. Where a setting changes the layout enough to matter, the variants appear next to each other: tileGrid three ways, grid two ways, pillList two ways.

This block is richText — a Lexical field with no settings at all. It renders as a centred reading column.

Über uns

hero — variant: centered, size: tall, overlay: scrim

Tall renders the background at its natural height with the title centred over it; the scrim darkens the photo and forces white text so any image stays legible.

Block reference

hero — variant: left, size: standard, no background

01 variant: left02 size: standard03 metaItems replace the description

Healf Expert

hero — metaStyle: pill (the expert header)

  • Biological Optimisation
  • Longevity

The live curation-expert header. Pills sit BETWEEN the name and this paragraph, the column narrows to 660px and centres, and unlike every other hero the description still prints alongside the meta items. Everything else about the block is unchanged — it is the same hero, wearing its third shape.

Above: grid — columns: 2, holding two collectionCard children. This is the homepage's pattern, used twice there. The grid owns layout, the children own content; children render 'nested', dropping their own page gutters so they fill the cell instead of re-containing themselves.

Above: grid — columns: 4, theme: dark, holding four collectionCard children. The /pages/brands wall is this exact shape with twenty-six of them. collectionCard is the only block that exists solely to live in a grid — it's absent from the top-level block list, so a grid is the only place you can reach it.

tileGrid — tileStyle: overlay, columns: 4

Portrait tiles with the label and a ringed chevron sitting ON the image. The Four Pillars band on /pages/about-us is this. A tile with no href drops the chevron.

02tileGrid — tileStyle: caption, columns: 4, number: 02

Nothing on the image; label and optional description sit below it. The expert grid on /pages/curation is this. Setting `number` switches the heading to the small-index treatment you see to the left.

Rose Ferguson

description renders under the label

Tara Swart

Jamie Clements

Matt Maruca

tileGrid — tileStyle: feature, columns: 3, per-tile ctaLabel

Near-square image with the label top-left and chevron bottom-right, then the caption and a pill button below it. The button only appears when a tile sets ctaLabel — the other two styles ignore that field. These are the Zone/Source/Curation cards on /pages/about-us.

Block reference

cardGrid — three cards with media, tags and links

An editorial card set: each card takes an image, a title, a tag row and a required description. Unlike tileGrid the cards are content-shaped rather than a photo wall, and each carries its own link CTA.

EAT Lebensbereich

Card one

tagsrender as pills

The description is required on this block — a card without one is a tile, and tileGrid already does tiles.

Card link
MOVE Lebensbereich

Card two

cardGrid

Cards keep their aspect ratio across breakpoints.

MIND Lebensbereich

Card three

Three is the usual count; the grid reflows to two-up then one-up as the viewport narrows.

cardCarousel — cardStyle: overlay

A horizontally scrolling row. Overlay uses a square image with the title on top of it; the sibling setting `caption` gives a 2:3 image with title and description below instead.

quoteSlider — navigation: dots, autoplay: true

“Dots auto-rotate; the `tabs` setting instead renders a manual tab row using each slide's tabLabel.”

“Slides carry an image, a category, a name and role, the quote itself and an optional description and CTA.”

Rose Ferguson

stickyScroller — cardStyle: tall

The heading sticks while the cards scroll past it. Tall gives each item a numbered 2:3 image with title and description below; `horizontal` instead lays each item out image-left, text-right.

Block reference

EAT Lebensbereich

Numbered items

`number` is per item, so the sequence is yours to set.

MOVE Lebensbereich

Each can link out

An item with an href becomes a link.

MIND Lebensbereich

Scroll to compare

The heading stays put until the last card clears it.

steps — columns: 1, a numbered how-it-works row

Media is optional per item, which is the difference from cardGrid: steps are a sequence, so they read fine as text alone.

  1. 1

    Step one

    Items render in order with their index shown.

  2. 2

    Step two

    An image per step is optional.

  3. 3

    Step three

    This step has no media at all — the row still balances.

steps — columns: 4, a centred grid with NO numbering

The layout live uses for the curation experts' non-negotiables band. Numbering is dropped on purpose: at 2-4 columns the items are a SET, not a sequence, so an ordinal would assert an order that isn't there. One column on phones, two from md, the full count from lg.

  • EAT

    Item headings step up to 24px here.

  • MOVE

    No weight utility — live computes 400.

  • MIND

    Media is optional in this variant too.

  • Healf Kuration

    SLEEP

    This one has an image, to show the row still aligns.

promise — bgImage set, badges + review marquee

badges render as pills
with a tick icon

ratingText is the authored fallback — a live Trustpilot reading for the market replaces it

Reviewer name

Reviews scroll as a marquee

The card strip duplicates itself so the loop is seamless, and pauses on hover. With bgImage set the cards go glassy over the photo; without it they sit on the theme surface.

Second reviewer

The rating line is three-tiered

Live per-market Trustpilot score first, then this block's ratingText, then the legacy static line from Reviewee — so a market never shows another market's numbers.

Reviewer name

Reviews scroll as a marquee

The card strip duplicates itself so the loop is seamless, and pauses on hover. With bgImage set the cards go glassy over the photo; without it they sit on the theme surface.

Second reviewer

The rating line is three-tiered

Live per-market Trustpilot score first, then this block's ratingText, then the legacy static line from Reviewee — so a market never shows another market's numbers.

Block reference

promoBanner — enabled: true, with a background image

A single full-width promotional band. Unticking `enabled` hides it without deleting it, which is how a campaign is parked between runs.

01splitFeature — imagePosition: left, two media entries

A media half beside a numbered display heading and body copy, sitting directly on the section surface with no card. The editorial sibling of collectionSpotlight, which puts its text on a cream card and can append a product row.

Blank lines in the body become separate paragraphs, as here. Because this block has TWO media entries it renders as a fading carousel with prev/next arrows — a single entry renders a static image instead.

stats — a figure row

Value and label per entry, nothing else. Deliberately text-only: it's a rhythm break between two image-heavy bands.

25
blocks in the page builder
3
tileGrid styles
2
grid shapes used on site

productGrid — source: latest, layout: grid, limit: 8

Shop all
Solid 160
SaleKostenloser Versand
Maurten

Solid 160

30,95 €35,95 €
Solid C 160
SaleKostenloser Versand
Maurten

Solid C 160

29,95 €35,95 €
Whey Protein Isolat - Schokolade
SaleKostenloser Versand
Probiotikum+
Kostenloser Versand
Vitamin A 10.000 IEVitamin A 10.000 IE
Kostenloser Versand
Haar Haut Nägel Ultra
Kostenloser Versand
B12 (Methylcobalamin)B12 (Methylcobalamin)
Kostenloser Versand
CurcuminCurcumin
Kostenloser Versand
tags render abovethe heading

collectionSpotlight — imagePosition: left, productsLayout: scroll

A cream/ink card beside an image, plus an optional product row underneath drawn from `source` — bestsellers here. splitFeature above is the same split without the card or the products.

Spotlight CTA
Elektrolyte zum Aufladen – ProbierpackungElektrolyte zum Aufladen – Probierpackung
Kostenloser Versand
Magnesium (Glycinat)Magnesium (Glycinat)
Kostenloser Versand
Erdnussbutter & geräuchertes SalzErdnussbutter & geräuchertes Salz
Kostenloser Versand
Performance Protein - VanillePerformance Protein - Vanille
Kostenloser Versand

408 Ergebnisse

productResults — mode: search

Elektrolyte zum Aufladen – Probierpackung
Kostenloser Versand
Magnesium (Glycinat)
Kostenloser Versand
Erdnussbutter & geräuchertes Salz
Kostenloser Versand
Performance Protein - Vanille
Kostenloser Versand
Kreatin
SaleKostenloser Versand
Thorne

Kreatin

38,49 €43,99 €
(354)
Elektrolyte aufladen – Himbeersalz
Kostenloser Versand
Elektrolyte aufladen – Wassermelonensalz
Kostenloser Versand
Performance Protein - Schoko-Haselnuss
Kostenloser Versand
Elektrolyte aufladen – Zitronensalz
Kostenloser Versand
Eisen-C
Kostenloser Versand
Eisenbisglycinat
SaleKostenloser Versand
Thorne

Eisenbisglycinat

13,49 €15,99 €
(101)
Beeren-Granatapfel-Elektrolyte
Kostenloser Versand
Zahlungspflichtig vorbestellen
Molekularer Wasserstoff-Tabletten – Geschmacksneutral
Kostenloser Versand
Omega-3
Kostenloser Versand
Momentous

Omega-3

34,99 €
(110)
Elektrolyte aufladen – Zitronensalz
Kostenloser Versand
True Collagen Powder
Kostenloser Versand
Gel 100
SaleKostenloser Versand
Maurten

Gel 100

35,95 €40,50 €
(92)
Elektrolyte aufladen – Grapefruit
Kostenloser Versand
Holunderbeeren-Elektrolyte
Kostenloser Versand
Zahlungspflichtig vorbestellen
Litschi-Elektrolyte
Kostenloser Versand
Zahlungspflichtig vorbestellen
Kreatin – Reisepackungen – NSF
SaleKostenloser Versand
Molekularwasserstofftabletten – Himbeere
Kostenloser Versand
Magnesium-L-Threonat
Kostenloser Versand
Kollagenpeptide
Kostenloser Versand
1 / 17

pillList — variant: row

Scrollable link pills with chevron nav that only appears once the row actually overflows. Each pill can carry an href.

pillList — variant: marquee

The same block as decoration: two auto-scrolling, edge-faded rows, centred title and intro. Hrefs are ignored here — the /pages/curation ingredients band is this variant.

  • Artificial colours
  • Parabens
  • Sulphates
  • Artificial sweeteners
  • Hydrogenated oils
  • Synthetic fragrance

accordion — width: narrow

Collapsible rows with Lexical bodies, so an answer can hold links and lists. `full` instead spans the band, which is what the Help Centre FAQ uses.

Narrow keeps a reading column, which suits a short FAQ beside other content. Full spans the band for a long, standalone list.

Block reference

faqList — categories: empty (every tab)

The Help Centre tabs and accordion over the shared faqs collection. Leaving categories empty shows every tab, which is the usual choice; naming some limits it, and a chosen tab with no questions in the visitor's market is dropped rather than shown empty.

Was passiert, wenn ich bei der Lieferung nicht zu Hause bin?

+

Sobald du deinen Tracking-Link per E-Mail erhältst, kannst du deine Lieferpräferenzen auf der Website des Versanddienstleisters anpassen. Verpasst du die Zustellung, informiert er dich über einen erneuten Zustellversuch oder eine Abholmöglichkeit in deiner Nähe.

Wohin liefert ihr?

+

Aktuell liefern wir ausschließlich innerhalb Deutschlands.

Welche Lieferoptionen bietet ihr an?

+

Innerhalb Deutschlands liefern wir wie folgt:

• Kostenloser Standardversand ab einem Bestellwert von 75 €.

• Bei Bestellungen unter 75 € fällt eine Versandpauschale von 4,99 € an.

• Die Standardlieferung erfolgt in der Regel innerhalb von 2–4 Werktagen.

• Versand aus der EU, keine Zollgebühren

Bei Fragen erreichst du uns unter team@healf.de.

Wie lange dauert es, bis meine Bestellung ankommt?

+

Die Lieferung innerhalb Deutschlands dauert in der Regel 2–3 Werktage ab Vertragsschluss. Bei Fragen melde dich gern unter team@healf.de.

Meine Bestellung dauert länger als erwartet – was kann ich tun?

+

Wir empfehlen, deine Sendungsnummer zu prüfen, um den aktuellen Status deiner Bestellung zu sehen. Dauert die Lieferung länger als die üblichen 2–3 Werktage, melde dich bitte bei unserem Kundenservice-Team unter team@healf.de – wir helfen dir gern weiter.

Meine Bestellung ist beschädigt angekommen. Was soll ich tun?

+

Es tut uns leid, falls ein Artikel beschädigt bei dir ankommt. Melde dich in diesem Fall innerhalb von 48 Stunden nach Erhalt bei unserem Kundenservice-Team unter team@healf.de und schick uns ein Foto und eine kurze Beschreibung. Wir kümmern uns so schnell wie möglich darum.

Wie kann ich meine Lieferadresse nach der Bestellung ändern?

+

Wenn du deine Lieferadresse ändern möchtest, melde dich bitte so schnell wie möglich bei unserem Kundenservice-Team unter team@healf.de. Wir versuchen, deine Daten noch vor dem Versand zu aktualisieren. Da wir zügig arbeiten, kann es aber sein, dass deine Bestellung schon vorbereitet ist. In dem Fall kannst du über den Tracking-Link, den wir dir senden, deine Lieferoptionen anpassen – etwa die Umleitung an einen Abholpunkt in deiner Nähe. Klappt das nicht, melde dich bei uns, und wir finden gemeinsam eine Lösung.

orderTracking — align: left

The in-page shipment timeline. Every visible string is an override on the block (loginLabel, searchPlaceholder, emptyText, notFoundText) so the copy can be tuned per market without touching code. Which Wonderment account it queries is a market fact, not a block setting.

Block reference

contactForm — heading, eyebrow and intro only

Thin by design: the CMS owns the lead-in copy, the form's own field labels come from Reviewee, and the submission target is wired in code. Nothing here to misconfigure.

Über uns

brandForm — theme is the PANEL style, not the band

The submit-your-brand form. Note the theme setting styles the PANEL, because the background image sets the band's contrast — a background-less brand form also declines the LCP slot for the same reason.

`attachments` toggles the file field. The labels group holds optional per-locale overrides for placeholders, buttons and result messages; each falls back to Reviewee, then to a built-in default.

Datei anhängen

logoMarquee — label beside an auto-scrolling logo strip

  • Glamour
  • Women's Health
  • SheerLuxe
  • GQ

Above: logoMarquee — the press strip from /pages/about-us. Each logo's accessible name is its media alt text, so there's no per-row label field. SVGs render as plain images rather than through the transform pipeline, which does nothing for vector art.

Scroll-driven

scrollSequence — markerStyle: dial

08:00Beats to BreathworkWITH LMNT
18:00Grammys to GratitudeWITH KIKI HEALTH
22:00World Tours to WellbeingWITH CYMBIOTIKA

Above: scrollSequence — a pinned frame sequence. `markerStyle: dial` draws a clock whose numerals stay upright while the rim turns, and it only appears when EVERY frame's marker parses as a time; anything else falls back to plain progress segments. Markers are rarely evenly spaced, so the dial emits one keyframe stop per frame rather than tweening end to end — a single tween would read 15:00 while frame two says 18:00. `revealOnEntry` opens the stage from an inset card; the stage keeps a margin and a 24px radius throughout, matching live.

pillarStepper — labels that hand over as you scroll

Each step's copy fades in as its label reaches the centre. The band is short on purpose — live's is 324px, about 0.41vh — which is why this is its own block rather than a scrollSequence variant.

Consecutive steps never overlap: the copy fades out over the last fraction of its slice and the next fades in over the first, so no two are ever printed on top of each other.

Zero JavaScript. The whole thing is `animation-timeline` on a shared ancestor, which is why both columns can be driven by one timeline.

Any number of steps works; the keyframes are generated from the count.

Above: arcCarousel — the same circle mechanic as the dial, WITHOUT the counter-rotation, which is the entire visual difference: the cards look hand-tilted but each just sits on the rim at `index x angleStep`. `sweep` is how far the rim turns across the pinned scroll. Products come from the shared picker (hand-picked SKUs win) or a collection, resolved through the same path as productGrid; hand-authored cards are the fallback so the rim can carry brands or editorial instead.

Above: productTabs — several named sets, shopper's choice. Not a productGrid variant: a productGrid shows one set, so the tab labels here are translated CONTENT rather than a layout option. A tab whose products don't resolve is dropped rather than rendered as a dead label, and a single surviving tab renders as a plain grid with no strip — which is what you are looking at if only one tab appears. `<product-tabs>` only toggles visibility and ARIA state; it never fetches.

videoWall — columns: 3

Grid on desktop
Snap row on mobile
One unmuted at a time

Above: videoWall — one markup, two layouts: a grid on desktop and a scroll-snap row on narrow screens, rather than legacy's second carousel component below the breakpoint. `<video-wall>` is the only script and it animates nothing — it plays a video only while it is on screen and allows at most one unmuted at a time. As everywhere else, a phone gets `mobileUrl` or the poster alone, never the desktop encode.

That's every block. If a block is missing from this page, it's missing from seed-sink-page.ts — add it there and re-run.