Work with us
BlocksStable

Quote Statement

Sourcecomponents/blocks/QuoteStatement.astro

The statement

A big centered statement over a blurred, dimmed image — an optional eyebrow above a large heading with serif-italic accents. The image is pinned so the page scrolls over it, and the statement fades up on scroll.

Scroll inside the preview — the image sits blurred behind while the statement rises and fades in.

Quote statement

Behaviour

  • Pinned image — the background is position: fixed, clipped to the section, so the page scrolls over one still, blurred image.
  • Reveal — the statement is .reveal; it slides up and fades in as the block enters the viewport. Respects prefers-reduced-motion.
  • Transparent mode — drop the block's own background so it floats over a fixed hero image behind it, reading as one continuous blur (used on the Sparklin opener).

Props

PropTypeDefaultNotes
titleHtml string — The statement (inline HTML; wrap accents in <em class="t-serif">). Required.
eyebrow string — Small label above the statement.
image string '/img/hero.jpg' The blurred background image (ignored when transparent).
transparent boolean false No own background — float over a fixed hero image behind it (one continuous blurred image, no seam).

Usage

Give it a short statement — it reads big. Needs the shared reveal driver on the page (<Reveal />, already in the site layout) for the fade-up.

<!-- Own blurred background -->
<QuoteStatement
  eyebrow="What we believe"
  titleHtml='Great brands aren’t decorated — they’re <em class="t-serif">built to be felt.</em>'
  image="/img/hero.jpg"
/>

<!-- Floating over the hero's fixed image (no seam) -->
<QuoteStatement transparent
  titleHtml='The thinking behind our <em class="t-serif">CHF 30,000 brands</em> — made accessible.' />

Rules

Do

Keep it to one or two lines with a single serif accent.

Use a dark, textured image so the white text reads.

Don't

Add a CTA — this is a statement, not an action block.

Use transparent without a fixed background behind it — there'd be nothing to show through.