When To Reach Out

Health19: When To Reach Out

A when-to-reach-out section: numbered signs down a ruled list beside a sticky photograph, closed by a pill and a plainly worded emergency notice.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/health19?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/health19?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/health19.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

The installed file exports health19Demo alongside the block: the exact props behind the preview above. Spread it to get a working signs section in one line.

import { Health19, health19Demo } from "@/components/beste/block/health19";

export default function Page() {
  return <Health19 {...health19Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Health19 } from "@/components/beste/block/health19";

export default function Page() {
  return (
    <Health19
      eyebrow="When to reach out"
      heading="You do not need to be at the end of your rope."
      description="Most people wait until things are unmanageable."
      button={{ label: "Reach out now", href: "/contact", tone: "dark" }}
      image={{ src: "/photos/lake.jpg", alt: "Morning mist lifting off a still lake" }}
      signs={[
        {
          title: "The tiredness has stopped responding to sleep",
          description: "You rest and wake unrested.",
        },
      ]}
      notice="If you are in immediate danger, contact emergency services or a crisis line first." 
    />
  );
}

Props

type Sign = {
  title: string;
  description: string;
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• notice sits after the call to action rather than before it, which is deliberate for this subject: the invitation comes first, and the emergency line is the last thing read before leaving the section.
• It is a plain paragraph, not a styled alert. A red box would turn a calm safety note into an alarm on a page whose whole argument is that nothing is urgent yet.
• Signs share one flat 0.1s delay rather than a growing stagger, so the last item does not arrive seconds after the reader has reached it.
• They use a tighter -15% viewport margin than the header, so an item settles once it is properly inside the reading area.
• The list is a dl with dt/dd pairs, so each sign's title stays bound to its explanation, and the numbers come from the index in tabular-nums.
• The photograph is md:sticky md:top-28, so it stays beside a long list, and drifts -10% to 10% against a 1.2 scale.
• Below md the sticky is dropped and the image becomes the last block in the stack, after the notice.