BlocksStable

Half Hero

Sourcecomponents/blocks/HalfHero.astro

The header

A compact page header on a solid violet field — a small eyebrow, a large two-line title, and a lead, all left-aligned. Half the height of a full hero; it opens inner pages like the Shop.

Half hero

Props

PropTypeDefaultNotes
title string — The big two-line title (supports <em> for a serif accent). Required.
eyebrow string — Small label above the title.
lead string — A lead paragraph under the title.
id string — Pass "hero" so the over-hero Navigation flips to solid past it.

Usage

Give it id="hero" when the page uses the over-hero Navigation, so the nav flips to solid once you scroll past the violet field.

<HalfHero
  eyebrow="Alchemy Services"
  title="Erschaffe etwas Aussergewöhnliches."
  lead="Wähle zwischen vielen Angeboten des Alchemy-Teams …"
  id="hero"
/>

Rules

Do

Keep the title to two lines; add one serif accent at most.

Pair it with over-hero nav so white text reads on violet.

Don't

Add a CTA — this is a header, not a full hero.

Use it on a light page with a solid nav — the violet clashes.