Each programme is a template your team can start from, then bend to the member in front of them without breaking the reporting.
First year of parenthood
12 weeks · weekly sessions
A structured start for new families, with room to slow down when a week goes badly and catch up when it does not.
Long-term condition care
Ongoing · monthly reviews
Steady, low-friction follow-up for members who will be with you for years rather than weeks, with escalation built in.
Return to work
8 weeks · fortnightly sessions
A short programme built with employers in mind, producing the paperwork they need without turning care into admin.
Every programme can be renamed, reshaped, or retired by your team without our help.
Three hairline programme cards, each pairing a light programme name with a muted duration line, a short explanation, a checked list of what is included, and a link into the full programme.
Three hairline programme cards, each pairing a light programme name with a muted duration line, a short explanation, a checked list of what the programme includes, and a link into the full detail page.
Free block
This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.
Radix flavor
npx shadcn add "https://ui.beste.co/r/health18"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/health18"This installs the block to components/beste/block/health18.tsx plus the badge23 component it uses for the eyebrow.
The installed file exports health18Demo alongside the block: the exact props behind the preview above. Spread it to get a working programme grid in one line.
import { Health18, health18Demo } from "@/components/beste/block/health18";
export default function ProgrammesPage() {
return <Health18 {...health18Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Health18 } from "@/components/beste/block/health18";
export default function ProgrammesPage() {
return (
<Health18
badge={{ label: "Programmes" }}
heading="Care that runs on a plan, not on a reminder"
description="Each programme is a template your team can start from."
items={[
{
name: "First year of parenthood",
meta: "12 weeks · weekly sessions",
description: "A structured start for new families, with room to slow down.",
includes: ["Fortnightly clinician review", "Between-session messaging"],
link: { label: "See the programme", href: "/programmes/first-year" },
},
{
name: "Long-term condition care",
meta: "Ongoing · monthly reviews",
description: "Steady follow-up for members who stay with you for years.",
includes: ["Automatic recall before the plan lapses"],
link: { label: "See the programme", href: "/programmes/long-term" },
},
]}
footnote="Every programme can be renamed or retired by your team."
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Monospace eyebrow above the hairline rule, rendered via Badge23 |
heading | string | – | Section heading in the left column |
description | string | – | Supporting paragraph, right-aligned from md up |
items | Program[] | [] | Programme cards, three to a row on md |
footnote | string | – | Small print under the grid |
className | string | – | Extra classes for the outer <section> |
type ActionLink = { label: string; href: string };
type Program = {
name: string;
meta: string;
description: string;
includes?: string[];
link: ActionLink;
};meta is one free-text line, which is what lets a card read 12 weeks · weekly sessions or Ongoing · monthly reviews without separate duration and cadence fields.flex-1, so the link is pinned to the bottom edge of every card in the row however uneven the lists are above it.includes is optional: a card without it drops both the list and the rule above it, and the link moves up to sit under the description.hover:border-foreground/40 and nothing else moves, and the link runs its arrow nudge from its own named group.