Prompt Pill
Sourcecomponents/PromptPill.astro
The pill
The glass "Talk to Miriam" pill from the startpage hero, extracted as a reusable component — a round portrait with a soft inner ring beside a two-line prompt, in a blurred glass card. The whole pill is the target.
Light surface
surface="light" — the same pill in its light look, for a plain page where there's no dark hero behind it. (On the real hero this flips automatically via body[data-nav="solid"].)
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
label | string | — | First line — e.g. "Talk to Miriam". |
sub | string | — | Second line — e.g. "about your Brand". |
avatar | string | — | The person's picture (a round image with a soft inner ring). |
href | string | — | Destination. With it the pill is an <a>; without, a <button>. |
surface | 'auto' | 'light' | 'auto' | 'auto' is the glass look and follows the hero's data-nav flag; 'light' forces the light look on a plain page. |
Usage
Give it the two lines (label + sub), a avatar, and a link. Default surface="auto" is the glass look and flips to light with the nav; force surface="light" where there's no dark hero.
<!-- On the hero (glass; auto-flips to light on solid nav pages) -->
<PromptPill
label="Talk to Miriam"
sub="about your Brand"
avatar="/img/miriam.png"
href="/contact"
/>
<!-- Forced light, e.g. a standalone light page -->
<PromptPill surface="light" label="Book a call" sub="with the team" avatar="/img/miriam.png" href="/book" />Rules
Keep the prompt to two short lines — it's a nudge, not a sentence.
Use a real person's face; it's what makes the pill feel human.
Leave it on auto over a plain light page — force surface="light" so it stays legible.
Stack several in a row — one clear prompt does the job.